Vuex模块化后使用上的区分

非模块化下的vuex各方法的调用与获取

目录结构

index.js代码

import Vuex from "vuex";
import Vue from "vue";

// 导入模块
import setting from './modules/setting'

const state = {
    sum: 12,
    userInfo: {
        username: '张三',
        token: 'hnI6UOiu2GJKN42jhnknJiB7s'
    }
}
// 同步操作state的方法
const mutations = {
    jia(state,num){
        state.sum += num;
    },
    jian(state,num){
        state.sum -= num;
    }
}
// 对state的值加工处理后返回
const getters = {
    bigSum(state){
       return state.sum * 10;
    }
}

// 异步修改state，通过触发mutations的方法修改state
const actions = {
    asyncJian(context,value){
        // 调用mutations下的方法更改state数据
        context.commit('jian',value)
    }
}

// modules集合
const modules = {
    setting,
}

Vue.use(Vuex);
export default new Vuex.Store({
    state,
    actions,
    mutations,
    getters,
    modules
});

setting模块代码

const state = {
    threm: 'light', // 系统主题色
    currentTime: '暂未设置时间' // 当前时间
}

// 同步操作state的方法
const mutations = {
    // 改变主题
    SET_THREM(state,value){
        console.log('state :>> ', state);
        state.threm = value;
    },
    // 更新当前时间
    SET_TIME(state,value){
        state.currentTime = value;
    }
}

// 异步操作state的方法，通过actions触发mutations的方法
const actions = {
    setTime(store,value){
        store.commit('SET_TIME',value);
    }
}

/**
 * 由于getter,action,mutation默认是注册在全局命名空间的，所以容易造成命名冲突的问题。
 * 为了解决这个问题，Vuex可以设置了、模块命名空间。
 * 通过给模块添加namespaced:true使其拥有自己的命名空间.
 * 这时getter，mutation，action都会自动根据模块注册的路径调整命名。
 */
export default {
    namespaced: true, // 开启命名空间，防止与其他模块的state污染
    state,
    mutations,
    actions
}

非模块化下使用

import { mapState,mapMutations,mapActions } from 'vuex'

/**********分割线***********/

computed: {
	...mapState(['userInfo','sum']), // 简写形式
	...mapState( // 完整写法
	   {
	       userInfo: 'userInfo',
	       sum: 'sum',
	    },
	 ),
},
methods: {
    ...mapMutations(['jia']), // 映射形式
    ...mapActions(['asyncJian']),
	// 同步修改
	changeSum1(){
      this.$store.commit('jia',2); // 方式一
      this.jia(2); // 方式二 调用映射的方法,前提需要使用mapMutations映射对应的方法
	},
	// 异步修改
    asyncChangeSum(){
      setInterval(() => {
        this.$store.dispatch('asyncJian',2); // 方式一
        this.asyncJian(2); // 方式二 调用映射的方法,前提需要使用mapActions映射对应的方法
      }, 1000);
    }
}

模块化中使用

import { mapState,mapMutations,mapActions } from 'vuex'

/**********分割线***********/

computed: {
	...mapState('setting',['threm']), // 简写形式 setting 模块中的数据
	...mapState( // 完整写法
	  {
	    /**
	     * 获取setting模块下的state数据
	     * @param {Object} state 将setting中的state放到index中的state
	     */
	    threm: state => state.setting.threm,
	    currentTime: state => state.setting.currentTime,
	  },
	),
},
methods: {
    ...mapMutations('setting',['SET_THREM']),
    ...mapActions('setting',['setTime']),
	// 模块化同步修改
    changeThrem(){
      this.$store.commit('setting/SET_THREM','drak111'); // 方式一
      this.SET_THREM('drak'); // 方式二 映射
    },
    asyncChangeTime(){
      this.$store.dispatch('setting/setTime','2023-06-02');
      this.setTime('2023-06-01'); // 方式二
    }
}