Vue（十五）：Vuex

1、Vuex是个啥
　　Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，类似于弄了一个全局的缓存库，缓存库中数据的改变---会实时改变---组件中因为使用该数据而产生的状态，达到一种牵一发而动全身的效果。

2、Vuex的使用
　　首先我们需要使用“npm install vuex --save"命令来安装vuex。vuex的核心概念是state、getter、mutation、action、module这五个概念，我们在下面放了一些基础的代码示例，再通过介绍来了解他们。

1）、state
　　state相当于组件中的data，以代码示例中的count为例，我们可以通过this.$store.state.count来访问该值，但是值得注意的是我们只能读取，不能直接修改。我们还可以使用mapState辅助函数帮助我们生成计算属性，需要import { mapState } from 'vuex'。举例举例：

computed:mapState({
        count:(state)=>state.count,
        countAlias:'count',
        countAdd2(state){
            return state.count+2;
        },
    }),

2）、getter
　　getter相当于组件中的computed，有时候我们需要直接在store中过滤一些数据，我们就可以直接使用getter，且getter中的数据会被缓存。就像在示例代码中写的那样，getter的第一个参数是state，后面的参数我们可以在调用的时候传进去。以代码示例中的nameTodos为例，我们可以通过this.$store.getters.nameTodos来访问该值，我们还可以使用mapGetters辅助函数帮助我们生成计算属性，需要import { mapGetters } from 'vuex'。举例举例：

<span v-for="todo in $store.getters.nameTodos" :key="todo.id">{{todo}}</span><br> //html代码
<span v-for="todo in $store.getters.getTodoById(2)" :key="todo.id">{{todo}}</span><br>
<span v-for="todo in maxNameTodos" :key="todo.id">{{todo}}</span><br>
//vue示例中代码
computed:mapGetters({
        maxNameTodos:'maxNameTodos'
    }),

3）、mutation
　　mutation相当于组件中的methods，刚才我们就说过了不能直接更改state中的值，怎么更改呢？就通过mutation中的方法更改。就像在示例代码中写的那样，mutation的第一个参数是state，后面的参数我们可以在调用的时候传进去。以代码示例中的increment为例，我们可以通过this.$store.commit('increment')来访问该方法，我们还可以使用mapMutations辅助函数帮助我们生成计算属性，需要import { mapMutations} from 'vuex'。需要注意的是，mutation中的方法必须是同步的，不能是异步方法。举例举例：

<span>{{$store.state.count}}</span>  //html代码
<button @click="Add1">+1</button>
<button @click="Add2">+10</button>
<button @click="Add3">+2</button>
<button @click="Add4">+1</button>
//vue示例代码
methods:mapMutations({
        Add1(){
            this.$store.commit('increment');
        },
        Add2(){
            this.$store.commit('incrementObj',{count:10});
        },
        Add3(){
            this.$store.commit(Mutations.SOME_MUTATION);
        },
        Add4:'increment',
    }),

4）、action
　　刚才我们说了mutation不能是异步操作，那谁来进行呢？action。action不是直接修改state，action也是直接提交的mutation。需要注意的是action的第一个参数是context，它是一个和store具有相同属性和方法的另一个对象，所以他也能调用mutation中的方法。以代码示例中的incrementObj为例，我们可以通过this.$store.dispatch('incrementObj')来访问该方法，我们还可以使用mapActions辅助函数帮助我们生成计算属性，需要import { mapActions} from 'vuex'。举例举例：

<span>{{$store.state.count}}</span> //html代码
<button @click="Add5">+10</button>
<button @click="Add6">+11</button>
//vue示例代码
methods:mapActions({
        Add5(){
            this.$store.dispatch('incrementObj',{count:10}).then((s)=>{alert(s)});
        },
        Add6(){
            this.$store.dispatch('increment12',{count:10});
        }
    }),

5）、代码示例
　　首先我们要在src目录下建立store文件夹，然后建立store.js文件

import Vue from "vue";    //store.js
import Vuex from "vuex";
import * as Mutations from '@/store/mutation-types.js'
Vue.use(Vuex);
var store = new Vuex.Store({
    state:{
        count:1,
        todos:[
            {id:1,name:"张三"},
            {id:2,name:"李四"},
            {id:3,name:"王二麻子"},
        ]
    },
    mutations:{
        increment(state){
            state.count++;
        },
        incrementObj(state,obj){
            state.count+=obj.count;
        },
        [Mutations.SOME_MUTATION](state){
            state.count+=2;
        }
    },
    getters:{
        nameTodos:state=>{
            return state.todos.filter(v=>v.id<=1);
        },
        getTodoById:(state)=>(id)=>{
            return state.todos.filter(v=>v.id==id);
        },
        maxNameTodos:state=>{
            return state.todos.filter(v=>v.id>2);
        },
    },
    actions:{
        incrementObj(context,obj){
            return new Promise((resolve, reject)=>{
                setTimeout(() => {
                    context.commit('incrementObj',obj);
                    resolve('success');
                }, 1000);
            })
        },
        increment12(context,obj){
            context.dispatch('incrementObj',obj).then(()=>{
                context.commit('increment');
            });
        },
    },
});

export default store;

 然后在main.js中引入store

import Vue from 'vue'
import App from './App'
import store from './store/store.js'
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>',
})

6）、module
　　vuex允许我们将store分割成模块，这样我们做大型项目的时候容易管理。基本理念呢就是建立一个新的store对象，然后汇总引入到最顶级的store对象中，加在module属性中，就像组件一样。我们下面呢通过动态注册，将vuex的状态同步vue的示例中，获取全局的属性和方法。
首先在store文件夹下建立modules文件夹，然后建立一个TestStore.js。写个简单的代码：

export default {
    state: {
        count: 1,
    },
    getters: {
        store_test_count(state) {
            return state.count
        },
    },
};

然后引入到store.js中，在store对象导出之前，动态注册一下，注册完之后，我们就能全局访问getters中的store-test-count了。代码如下：

import Test from "@/store/modules/Test.js";
store.registerModule("Test", Test);

后面我们在store文件夹下建立mappings文件夹，然后建立一个Test.js，这实际是一个vue的示例。写个简单的代码：

import { mapGetters } from 'vuex'
export default {
    computed: mapGetters([
        'store_test_count',
    ]),
}

这个时候呢，我们的这个js通过获取store中的属性就有了一个叫store-test-count的计算属性。我们把这个属性在main.js中混合到App示例中之后就是全局的计算属性了。我们建立一个引导的js文件，叫storeMapping.js。上代码吧：

import Test from "@/store/mappings/Test.js";   //storeMapping.js
export default {
    initMixins(Vue) {
      Vue.mixin(Test);
    }
  };
//main.js
import storeMapping from './store/storeMapping.js'
storeMapping.initMixins(Vue);  //在创建App示例前调用