Vue 中使用Vuex

在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；