vuex简单整理

• index.js：入口文件
• state.js：存储状态。也就是变量。
• getters.js：派生状态。也可以理解为set、get中的get。有两个可选参数，state、getters分别可以获取state中的变量和其它getters。和vue中的computed类似。
• mutations.js：提交状态修改。可以理解为set、get中的set。每一个mutation都有一个字符串的事件类型和回调函数。第一个参数默认为state。vuex中唯一修改state的方式，不支持异步操作。和vue中的methods类似。
• mutation-types.js：存储于mutations相关的字符串常量，方便检测和管理。
• actions.js：和mutations类似。支持异步操作，也可以是对mutations的封装。

Mutation: 
     ADD_DB(state) {
        state.cartList.forEach(function(item) {
            item.num = 0;
        });
    },
 action
  sortNumStatus: ({
        commit
    }) => {
        commit(types.ADD_DB);
    },
通過action中的commit(xxx)方法觸發mutation中的xxx(state) {state.xxx = xxx} 來更改state中的數據
如何觸發action呢
...mapActions([
    'sortNumStatus'  
]),
或者直接
    methods:{
       this.$store.dispath('sortNumStatus',arr);
    }
    

getters可以全局操作更改state中數據
getters:
module.exports = {
    getInfos(state) {
        state.cartInfos.total_price = 0;
        state.cartInfos.total_nums = 0;
        return state.cartInfos;
    },
    getCartList(state) {
         return state.cartList;
    }
};
調用getters中的全局的方法
    computed:{
        ...mapGetters([
            'xxxxx'
        ])
    }

　　总结： 

1、应用层级的状态应该集中到单个 store 对象中，状态对象太复杂的时候可以划分module。

 

2、提交 mutation 是更改状态的唯一方法。

 

3、在触发方法上：

 

action的触发是dispatch

 

mutation的触发是commit；

 

4、在功能上：

 

state保存的是数据

 

getters是对state进行二次加工

 

action的处理函数的功能最终是commit mutation

 

mutation处理函数的功能最终是改变state

 

5、在同步异步上：

 

异步逻辑都应该封装到 action 里面

 

mutation 是同步的，不能出现异步

 

6、在流程上：

 

vue component—-dispatch—->actions—-commit—->mutations—-mutate—->state—-render—->vue component。从而形成闭环。见图：

 

 

7、辅助方法的映射上：

 

mapGetters、mapState 都是用在computed声明里面；

 

mapActions、mapMutations则都是用在methods声明里面。