在store目录下新建一个baseStore.js 文件,namespaced表示当前模块是否使用命名空间,主要处理不同模块命名和方法冲突,建议设置为true,namespaced值为true和false取值和赋值的方式不一样
export default {
// dispatch 指定模块名称
namespaced: true,
state: {
token:'',
userData:{}
},
//get方法
getters: {
getUserData:state=>{
//return localStorage.getItem("USER_INFO") ? JSON.parse(localStorage.getItem("USER_INFO")) : {}
return state.userData;
}
},
//set方法
mutations: {
//赋值token
setToken (state, token) {
state.token = token;
},
//赋值用户信息
setUserData (state, userData) {
state.userData = userData;
},
},
actions: {
//修改token
updateToken (context,value) {
context.commit('setToken',value);
},
//修改user信息
updateUserData (context,value) {
context.commit('setUserData',value);
}
}
};
在store目录中的index引入baseStore
import Vue from 'vue'
import Vuex from 'vuex'
import baseStore from './baseStore';
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//TODO 设置全局数据
},
mutations: {
},
actions: {
},
modules: {
baseStore
}
})
使用store,namespaced为true/false 不同的操作方式
当namespaced为true时
//获取值
this.$store.getters["baseStore/getUserData"];
//赋值
this.$store.commit('baseStore/setUserData', {'name':'PengKang','sex':'男'});
也可以在计算属性中使用
import { mapState, mapGetters , mapActions} from 'vuex';
computed: {
...mapGetters({
userDatas: "baseStore/getUserData"
}),
},
this.userDatas
在methods 调用baseStore中的action方法
methods:{
...mapActions({updateToken:'baseStore/updateToken',updateUserData:'baseStore/updateUserData'}),
//this.testStore();
testStore(){
//调用baseStore中的action方法
this.updateToken("value");
}
}
当namespaced为false时
//赋值
this.$store.commit('setUserData',{'name':'PengKang','sex':'男'});
//获取值
this.$store.getters.getUserData;