Vuex

概念

为Vue.js程序开发的一套状态管理器

State

项目的数据源，整个项目的状态都保存在state里面。

 state:{
     number:123,
     name:'bulang',
     sex:'boy',
     infos:[{
         name:'kaisa',
         sex:'boy'
      },{
         name:'jiecaowa',
         sex:'girl'
     }]
 },
复制代码

组件中获取state的方法：

• this.$store.state.key
• 使用辅助函数mapState()把state里面的值映射为组件的计算属性并展开，在组件的模板里面便可以直接使用： computed:{ ...mapState(['key']), } 复制代码

Mutation

提交mutation是唯一可以改变state的方法；

第一个参数为state，第二个参数为自定的参数payload；

使用同步方式操作state，否则由于异步数据无法追踪导致devtools记录的历史快照会出问题；

// 例：
mutations:{
    add:(state, payload)=>{
        state.number+=payload.gap;
    },
    reduce:(state, payload)=>{
        state.number-=payload.gap;
    }
}
复制代码

组件中提交mutation的方法：

• this.$store.commit('add',{gap:5})
• 使用辅助函数mapMutations()把对应的mutaions映射到组件的methods里面并展开，在组件的模板里面便可以直接使用： // 例 import { mapMutations } from 'vuex'; export default { name:"active", methods: { ...mapMutations(['add', 'reduce']) }, } 复制代码

Action

主要作用：执行异步操作（如：接口请求等）并提交mutaion;

• 第一个参数为与Store实例一样具有相同方法的context对象，可以通过解构的方式获取对象上的方法；
• 第二个参数为自定义传的值；
• actions之间可以互相派发；

// 例：
actions:{
    toLog:({dispatch}, msg)=>{
        dispatch('promiseLog',msg).then(()=>{
            console.log('success');
        }).catch(()=>{
            console.log('error');
        })
    },
    promiseLog:({commit},msg)=>{
        return new Promise((resolve, reject)=>{
            const i = ~~(Math.random()*10);
            console.log(i)
            if(i<5){
                commit('log',msg)
                resolve();
            }else{
                reject();
            }
        });
    }
},
复制代码

在组件中派发actions的方法:

• this.$store.dispatch('toLog','yes')
• 使用辅助函数mapActions()把actions映射到组件的methods里面，然后在组件的模板里面直接调用 // 例： import { mapActions } from 'vuex'; export default { name:"active", methods: { ...mapActions(['toLog']) }, } 复制代码

Getter

主要作用：对state数据进行加工，用来派生新的状态

• 第一个参数为state用来提供数据；
• 第二个参数可以传入其他的getters，使用其他getter加工后的数据；
• 可以在getter中返回一个函数，这样我们在使用的时候就可以传递参数，根据参数来决定返回的数据；

// 例：
getters:{
    getInfo:state=>{
        return `my name is ${state.name}, ${state.sex}`;
    },
    getCustomInfo:state => index => {
        return `my name is ${state.infos[index]['name']}, ${state.infos[index]['sex']}`;
    }
}
复制代码

在组件中使用getters

• this.$store.getters.getInfo
• 使用辅助函数mapGetters把getter映射到组件的computed里面，然后在组件模板中直接使用； // 例： import { mapGetters } from 'vuex' export default { name:'show', computed:{ ...mapGetters(['getInfo', 'getCustomInfo']) } } 复制代码

Module

当项目足够大的时候，所有的state，mutaions，actions，getters放到一个文件里面会非常难维护，所以我们需要把state，mutaions，actions，getters分别提出来放到各自的文件并导出。

1. 每个模块里面有各自的state，mutaions，actions，getters文件;
2. 每个模块有一个index.js文件统一导出所有方法;
3. 导出模块时可以指定是否使用命名空间，这样可以在组件中指定对应的模块来执行对应的操作;
4. 在store的入口文件导入所有模块儿;
5. 实例化Store时在modules里面传入模块;
6. 使用辅助函数时，如果声明了使用命名空间，可以给辅助函数的第一个参数传入指定模块;

最后，咱给小编：

1. 点赞+关注

2. 点头像关注后多多评论，转发给有需要的朋友。

谢谢！！