- src目录文件下新建module文件夹，在module文件夹下新建第一个模型cart，新建index.js ，包含state 、mutations 、actions 、getters ，不要忘记用export default把它们暴露出去。
// src/module/cart/index.js
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default {
state,
mutations,
actions,
getters
}
- 在store.js主vuex文件里面引入module
// src/store.js
import Vue from 'vue'
import Vuex from 'vuex'
import cart from './module/cart' //引入cart
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
cart: cart
}
})
- mapState 的使用
// src/module/cart/index.js
const state = {
list:[{
name:'香蕉',
price:12,
code:'123456798'
},{
name:'苹果',
price:18,
code:'987654321'
}]
}
//about.vue 使用mapState取值
import { mapState } from 'vuex'
// 写法一
computed: {
...mapState({ //...展开运算符
list: state => state.cart.list //此处注意需要区分模块(cart)，不能少 .cart.
})
}
// 写法二
computed: mapState ({
list: state => state.cart.list
})
}
// 写法三
computed:{
list: function () {
return this.$store.state.cart.list
},
}
- actions 的使用，注意参数context，
// src/module/cart/index.js
const actions = {
getInfo (context) {
Api.get('/api/group/listByRecommend', qs.stringify({})).then(response => {
//使用commit提交(调用)mutations 中的getInfo方法改变state中的getInfo
context.commit('getInfo', response.data)
})
}
}
// about.vue
//使用dispatch提交(调用)actions中的getInfo方法
created () {
this.$store.dispatch('getInfo')
},
- mutations的使用，注意参数state，
// src/module/cart/index.js
const mutations = {
getInfo (state, data) {
state.grouplist = data
}
}
//data为actions 中传过来的值
