VueX Module:路过你,忘记你

0. 缘起

忘了vuex里面的module咋用的了

1. 官网文档

Module | Vuex (vuejs.org)

2. 拆分使用

2.1 vuex 文件夹下 index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

import WWUser from './module/WWUser'

import {state} from './store'
import { mutations} from './mutations'
Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  modules: {
    WWUser,
  },
  getters
})

2.2 module文件夹下的WWUser.js

export default {
    namespaced: true,	//使用命名空间,这样只在局部使用
    state: () => ({
        WWUserInfo: {}
    }),
    mutations: {
        SET_USER: (state, data) => {
            state.WWUserInfo = data;
        }
    },

}

2.3 在login.vue中使用SET_USER

        this.$store.commit("WWUser\SET_USER", res.data.userInfo);

附录

vuex之module的使用 - iveBoy - 博客园 (cnblogs.com)

posted @   乐盘游  阅读(25)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~
点击右上角即可分享
微信分享提示