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'
        ])
    }
相關文章
相關標籤/搜索