vuex分模块时候state、mutations、getters、actions的使用

1.在store下面创建modules文件夹，并创建cart.js模块

2.模拟数据如下：

const state ={
    list:[
        {
            name:'书籍',
            num:10
        },
        {
            name:'水果',
            num:5
        }
    ],
    cartName:'这个是购物车的名字',
    cartInfo:{
        active:true,

    }
}
const mutations ={
    changeNage(state,name) {
        state.cartName = name;
    },
    changeInfo(state,info) {
        state.cartInfo = info;
    }
}

const getters ={
    getList(state) {
        return state.list.filter(item=>item.num>5)
    }
}

const actions = {
    changMyName(ctx,name) {
        ctx.commit('changeNage',name)
    }
}
export default {
    namespaced:true,
    state,
    mutations,
    getters,
    actions
}

记住这里namespaced属性一定要是设置为true。

2.在store/index.js引入上面的cart.js

import Vue from 'vue'
import Vuex from 'vuex'
import cart from './modules/cart'
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    user,
    cart
  }
})

3.state在前端页面的两种使用方式

...mapState('cart',['list']),
或者{{$store.state.cart.list}}

4.getters在前端页面的使用方式

...mapGetters('cart',['getList'])
或者{{$store.getters['cart/list']}}

5.mutations和actions相同

 this.$store.dispatch('cart/changMyName','这个是新名字')
 ...mapActions('cart',['changeName'])