持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
前言
在之前的文章中，我们讲解了Vuex如何利用state与mutations、actions进行集中状态的管理、Vuex通过getters对state中的数据进行加工以及Vuex四个map方法的使用，本文我们将继续对Vuex的模块化操作进行讲解。
概念
Vue官网对于Vuex模块化做出了这样的定义：如果你的 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：
store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块
我们便依据官网给的结构来进行简单演示。
案例
案例对于实际需求进行粗略实现，所以actions以及mutation就不单独拆分出来了，只要能达到Vuex模块化需求即可。
设计
我们先来大概设计一下页面的结构，分析一下数据就是要有一个产品列表
实现
页面
1.products.vue
<h3>这里是products</h3>
<ul>
<li v-for="(item,index) in productList" :key="index">
{{item.name}}--{{item.desc}}--{{item.price}}
<button @click="addToCart">加入购物车</button>
</li>
</ul>
2.cart.vue
<h3>这里是cart</h3>
<ul>
<li v-for="(item,index) in cartList" :key="index">
{{item.name}}--{{item.desc}}--{{item.price}}
</li>
</ul>
Vuex中准备数据及方法
这里要先说到一个东西，命名空间：namesapced:true，当模块被导入注册之后，它的所有配置项都会自动根据模块注册的路径调整命名，也就是说，我们在调用这些方法时，需要加上这个文件的路径(比如我要访问这个文件中的state里边的某个属性：this.$store.state.car。后边这个car就是多了个car.js模块名，因为如果不加模块名，那我们会访问所有模块中的属性，那就乱了)，所以我们要加上命名空间，相当于独立的区块去使用，模块和模块之间互不干扰。
1.module/products.js
export default{
namespaced: true,
state : {
productList: [
{ name: "苹果", desc: "红，可口", price: 6 },
{ name: "橘子", desc: "甘甜、微酸", price: 4 },
{ name: "香蕉", desc: "软、条状", price: 8 },
{ name: "西瓜", desc: "椭圆、绿", price: 20 },
{ name: "樱桃", desc: "小，圆", price: 40 }
]
},
}
2.module/cart.js
export default {
namespaced: true,
state: {
cartList: [
{ name: "男鞋", desc: "红,41码", price: 300 },
{ name: "男T恤", desc: "170cm", price: 200 },
]
},
}
3.store下index.js
import Vue from "vue";
import Vuex from 'vuex';
import products from './modules/products'
import cart from './modules/cart'
Vue.use(Vuex)
const mutations={
addToCart(state, value) {
state.cart.cartList.push(value)
}
}
export default new Vuex.Store({
mutations,
modules: {
products,
cart
}
})
页面中使用
products.vue
computed: {
/* //方式一：直接自己读取
productList(){
return this.$store.state.products.productList
} */
//方式二：借助mapState读取，第一个参数为store的index.js文件中暴露的modules名
...mapState('products',['productList']),
},
methods: {
/* addToCart(item){
console.log("成功加入购物车");
//方式一：自己直接commit
this.$store.commit('addToCart',item)
}, */
//方式二：借助mapMutations：此处因为直接在index.js文件中定义mutations就不用加第一个命名参数
...mapMutations(['addToCart']),
},
效果
总结
以上就是Vuex模块化的内容，到这里关于Vuex的文章也告一段落。希望大家都能学到一点东西！
