巧学vuex

"Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化"。这句话是截取vuex官网上对vuex介绍的一句话，对于不少新手朋友，刚接触vuex的时候，确定被它这么多的专业词汇搞得一脸懵逼，不知所云。那么做为新手该如何学习vuex呢，个人建议就是“理解”，用通俗易懂的话和比喻来讲明vuex是个干啥的，是个什么东西。

vuex

上面的前言，说了要用通俗易懂的话来介绍vuex，那么该怎么理解呢？个人理解就是，你把vuex当成一个项目顶层的全局对象来看待，有了这样的认识，你在学习vuex确定会事半功倍的。

安装vuex

首先咱们要安装：

`

npm install vuex --save
复制代码

`

其次就是建立vuex，建立这一块建议你们按照官方的文档命名来，这样作的目的吗，显而易见，你们都知道开发当中有一些潜在的规范，遵照这些规范就是为了让你们好理解，我这里是干吗的。在这里我就建议你们在项目里单首创建一个store的文件夹，并在里面建立一个index.js的文件吧，而后在index.js里引入vuex:

`

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex);

// 这个是store文件夹下的index.js文件
export default new Vuex.Store({ // 导出这个对象
    state: {
        
    },
    getters: {

    },
    mutations: {
        
    },
    actions: {
        
    }
})
复制代码

`

最后在main.js的文件里引入咱们刚建立的store文件夹里的index.js文件：

`

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store/index';  // 引入vuex

new Vue({
  el: '#app',
  router,
  store, // 注入vuex 
  components: { App },
  template: '<App/>'
})
复制代码

`

到这一步，咱们的vuex就算是搭建完毕了,下面咱们就针对vuex里的各个功能模块进行探讨,vuex下面有四个功能模块state, getters, mutations, actions，也就是四个子对象。

State

前面咱们说了vuex其实就是一个全局对象，而这个对象呢包含有四个子对象，子对象一：state，state是干吗的呢？，state就是这个全局对象专门用来存储数据的地方，也就是公共的数据源：

`

export default new Vuex.Store({ 
    state: { // 这里是存储数据的地方，公共的数据源
        animals: [{num: 1, animal: '老虎'}, {num: 2, animal: '狮子'},
        {num: 3, animal: '大象'}]
    }
})
复制代码

`

那么如何使用这个数据呢？使用很简单，直接在vue里的computed对象里书写便可：

`

// 组建里调用
<template>
    <div>
        <ul>
            <li v-for="(item,index) in animals" :key="index">
                <label>{{item.num}}</label>
                <span>{{item.animal}}</span>
            </li>
        </ul>
    </div>
</template>

// ...其余代码省略
computed: {
    animals () {
            return this.$store.state.animals;
        }
}
复制代码

`

注意：this.$store就是咱们整个vuex实例，也就是咱们说的那个全局对象,state就是存储公共数据的容器。 这样咱们就成功的使用到了vuex state里的数据了。

Getter

子对象二：getter，它的功能和做用就相似于vue里的computed,也就是说vuex里的计算属性，vue里的computed是用来对数据进行额外操做的，vuex里的getter也是同样的：

`

export default new Vuex.Store({ 
    state: { // 这里是存储数据的地方，公共的数据源
        animals: [{num: 1, animal: '老虎'}, {num: 2, animal: '狮子'},
        {num: 3, animal: '大象'}] 
    },
    getter: {
        filterAnimal: state => {    // 这是个方法
            return state.animals.filter(item => {
                return item.num > 1
            })
        }
    }
})
复制代码

`

注意：getter里面filterAnimal是个方法，方法名字随你本身定义，state这个参数就是vuex存储数据里的state,getter里全部的方法都默认传入了该参数。 使用也是直接在vue里的computed对象里书写：

`

// 组建里调用
<template>
    <div>
        <ul>
            <li v-for="(item,index) in filterAnimal" :key="index">
                <label>{{item.num}}</label>
                <span>{{item.animal}}</span>
            </li>
        </ul>
    </div>
</template>

// ...其余代码省略
computed: {
    filterAnimal () {
            return this.$store.getters.filterAnimal;
        }
}
复制代码

`

Mutations

子对象三：mutations，官网里是这样介绍的：“更改 Vuex 的 store 中的状态的 惟一 方法是提交 mutation”，在这段话里面请你们注意那个“惟一”。这也就是说，对vuexstate里面的数据，你要想进行修改，必须经过mutations方式才能够，只有mutations这个对象里的方法才能够修改state里的数据，也就是状态：

`

export default new Vuex.Store({ 
    state: { // 这里是存储数据的地方，公共的数据源
        animals: [{num: 1, animal: '老虎'}, {num: 2, animal: '狮子'},
        {num: 3, animal: '大象'}] 
    },
    mutations: {
        addAnimal (state, params) { // params是来自你调用这个方法时传入的参数
            state.animals.push(params)
        }
    }
})
复制代码

`

注意：mutations里定义的方法能够接收两个参数，state就是数据对象，params就是调用时传递过来的数据

组建里调用mutations里的方法，使用this.$store.commit()触发，参数一是你要触发的mutations里的哪一个方法，参数二就是你要传递过去的数据： `

// 组建里调用
<template>
    <div>
        <button @click="addAnimal()">增长动物</button>
        <ul>
            <li v-for="(item,index) in filterAnimal" :key="index">
                <label>{{item.num}}</label>
                <span>{{item.animal}}</span>
            </li>
        </ul>
    </div>
</template>

// ...其余代码省略
methods: {
    addAnimal () {
            let animal = {num: 4, animal: '熊猫'}
            this.$store.commit('addAnimal', animal);
        }
}
复制代码

`

mutations操做注意事项：mutations属于同步操做，因此你在操做时请记得提早声明好你要操做的数据，也就是state里的数据。

Actions

子对象四：actions相似于mutations，actions的不一样点有两点：

• action 提交的是 mutation，而不是直接变动状态;
• action 能够包含任意异步操做;

你们请记住上面这两点，上面介绍mutations时说过，要想改变state里面的数据，惟一的方法就是经过mutations,因此action这里也是经过mutation: `

export default new Vuex.Store({ 
    state: { // 这里是存储数据的地方，公共的数据源
        animals: [] 
    },
    mutations: {
        initAnimal (state, params) { // 初始化state里animals数据
            state.animals = params;
        }
    },
    actions: {
        initAnimals (context) {
            return new Promise((resolve, reject) => {
                let animals = [{num: 1, animal: '老虎'}, {num: 2, animal: '狮子'},
                              {num: 3, animal: '大象'}]
                context.commit('initAnimal', animals);  //调用mutations里的方法
                resolve(animals);
            })
        }
    }
})
复制代码

`

组建里面调用，使用vuex里的this.$store.dispatch()方法执行，上面例子中的Promise并无实际意义，只是为了演示特地写出来的，你方法体里直接写context.commit()也是能够的：

`

// 组建里调用
// ...其余代码省略
created() {
    this.$store.dispatch('initAnimals');
}
复制代码

` 在本示例中，调用是在组建生命周期钩子函数里调用，具体在什么地方调用，根据实际的业务需求去实现便可。

mapState、mapGetters、mapActions

mapState、mapGetters、mapActions这三个是vuex里简化调用而提供的方法，你若是须要使用，须要在你使用的组建单独引入这三个方法：

`

// 组建里调用
<template>
    <div>
        <ul>
            <li v-for="(item,index) in animals" :key="index">
                <label>{{item.num}}</label>
                <span>{{item.animal}}</span>
            </li>
        </ul>
    </div>
</template>

// ...其余代码省略
import {mapState, mapGetters, mapActions} from 'vuex';

computed: {
    // 使用扩展运算符
    ...mapState({
        animals:state => state.animals
    }),
}
复制代码

`

这里暂且只示例mapState了，其余留给你们本身尝试，稍微说明应用的地方，mapGetters通常也是在computed里调用，mapActions通常是在methods的方法里调用。

Module

看完上面的内容，其实你们已经会使用vuex了，那么这个Module是干吗的呢，上面咱们说过，vuex是老顶层的全局对象，若是全部的数据状态若是都写在这个index的文件里面，代码体会愈来愈大，因此，vuex容许咱们把store分割成各自独立的模块，每一个独立模块都有本身的state, getters, mutations, actions,注意哦，分割出去的各个模块，他们的state里的数据都是独立，各自是各自的。:

`

import Vue from 'vue';
import Vuex from 'vuex';
import module1 from './modules/module1';
import module2 from './modules/module2';

// 这个是vuex的主模块，也就是index.js这个文件
export default new Vuex.Store({
state,
mutations,
actions,
modules: {
    module1,
    module2
}
复制代码

}) `

独立出去的模块使用import引入进来，在主模块里在modules里注入便可。

总结

在本篇文章的思路里，是以全局对象的思惟方式来学习vuex，其目的也是为了让你们更快速的理解和认识vuex，那么vuex是否就是全局对象呢，在vuex的官方文档里就已经给出了答案和解释：

• Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地获得高效更新。
• 你不能直接改变 store 中的状态。改变 store 中的状态的惟一途径就是显式地提交 (commit) mutation。这样使得咱们能够方便地跟踪每个状态的变化，从而让咱们可以实现一些工具帮助咱们更好地了解咱们的应用。

vuex的主要应用就是对多组建或者多页面使用同一个数据源，也就是说共用同一个数据，当咱们在某一个组建改变这个数据的某一个状态或者值时，相应的也让其余组建和页面发生相同的变化。 最后也把vuex官网的连接贴在这里，你们看完后能够在去官网查看实际API。