文件配置
store文件夹下的index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
num: 1,
age: 18
},
getters: {
a(state){
return state => state.num
},
b(state){
return state => state.age
}
},
mutations: {
ADD(state){
state += 1
},
MIN(state){
state -= 1
}
},
actions: {
ADD(context){
context.commit('ADD')
},
MIN({commit,state}){
commit('MIN')
}
}
})
组件中使用：
this.$store.state.num
this.$store.commit('ADD')
this.$store.dispatch('MIN')
使用辅助函数：
import {mapGetters, mapActions} from 'vuex'
computed:{
...mapGetters(['a', 'b'])
},
methods: {
...mapActions(['ADD', 'MIN'])
}
vuex模块化
在store文件夹下创建一个modules文件夹，在modules文件夹下创建模块的js文件
user.js文件
const state = {}
const getters = {}
const mutations = {}
const actions = {}
export default{
state,
getters,
mutations,
actions
}
index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import user from './modules/user'
import permission from '/modules/permission'
const store = new Vuex.Store({
modules:{
user,
permission
}
})
export default store