store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import cart from './cart'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
cart
}
})
store/cart/index.js
一定要开启namespaced:true，不然不会拆分
export default {
namespaced:true,
state: () => ({
list: [
{
id: "1",
name: "西瓜",
price: 20,
},
{
id: "2",
name: "苹果",
price: 5,
},
{
id: "3",
name: "荔枝",
price: 3,
},
],
}),
mutations: {
addFruit(state, val) {
state.list.push(val)
},
deleteFruit(state, index) {
state.list.splice(index, 1)
}
},
actions: {
addFruitAction({ commit }, val) {
commit('addFruit', val)
},
deleteFruitAction({ commit }, index) {
commit('deleteFruit', index)
}
},
页面上调用拆分模块后的数据和方法
<script>
import { mapState, mapActions } from "vuex";
export default {
name: "CartComponent",
computed: {
...mapState({
list: (state) => state.cart.list,
}),
},
methods: {
...mapActions('cart',["deleteFruitAction"]),
deleteFruit(index) {
this.deleteFruitAction(index);
},
},
};
</script>
