vuex中的modules使用_vuex models

1. modules是什么

         模块，向store注入其他子模块，可以将其他模块以命名空间的方式引用。

2.为什么要用modules

          为了拆分state中的数据，提高可维护性，防止修改时的覆盖和重名。

3.modules的具体用法

前置条件：

（1）在工程的 /src/store目录下建modules文件夹。

（2）modules文件夹下建shop.js:

const shopCar = {
    namespaced:true, //开启命名空间
    state: {
        carr:[
            {pid:1,pname:'牛逼1',price:10000},
            {pid:2,pname:'牛逼2',price:20000},
            {pid:3,pname:'牛逼3',price:30000},
            {pid:4,pname:'牛逼4',price:40000},
            {pid:5,pname:'牛逼5',price:50000}
        ]
    },
    mutations: { // 模板中的修改器不能直接调用
        addCarr(state,po){
            state.carr.push(po);
        }
    }
}

export default shopCar;

注意：要开启命名空间。

引入模块：

（1）在state 文件夹的 index.js头部加代码：

import shop from './modules/shop.js'

（2）在state 文件夹的 index.js中的 modules 中注册模块：

modules: { // 模块
     shop
  }

（3）在actions中通过命名空间调用模块中的修改器：

actions: { // 动作调用修改器 ，修改器改state 
     
      carr(context,po){  // 通过命名空间调模板中的 修改器
          context.commit("shop/addCarr",po);
      }          
  }

然后在vue页面中直接调用actions就可以了。