store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 公共state对象,存储所有组件的状态
state: {
user: {
name: '',
age: ''
}
},
// 唯一取值的方法,计算属性
getters: {
getUser(state) {
return state.user
}
},
// 唯一可以修改state值的方法,同步阻塞
mutations: {
updateUser(state, user) {
state.user = user
}
},
// 异步调用mutations方法
actions: {
asyncUpdateUser(context, user) {
context.commit('updateUser', user)
}
},
modules: {
}
})
组件中使用
//state中的数据
{{ $store.state.user }}
//getters中的数据
{{ $store.getters.getUser.name }}
// mutations方法使用commit调用
this.$store.commit('updateUser',{
name: 66,
age: 88,
})
// actions方法使用dispatch调用
this.$store.dispatch("asyncUpdateUser", {
name: this.name,
age: this.age,
});
模块化
//user.js
const user = {
/* 命名空间,打开之后,调用方法时:this.$store.commit('user/updateUser',{
name: 66,
age: 88,
}) */
namespaced: true,
// 公共state对象,存储所有组件的状态
state: null != window.sessionStorage.getItem('state') ? JSON.parse(window.sessionStorage.getItem('state')) : {
user: {
name: '',
age: ''
}
},
// 唯一取值的方法,计算属性
getters: {
getUser(state) {
return state.user
}
},
// 唯一可以修改state值的方法,同步阻塞
mutations: {
updateUser(state, user) {
state.user = user
}
},
// 异步调用mutations方法
actions: {
asyncUpdateUser(context, user) {
context.commit('updateUser', user)
}
},
}
export default user;
//index.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user.js'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
user
}
})
注:本文参考小破站up主“码歌”视频教程,整理得来。