vue3.0 Vuex模块化管理

关注

原创最新推荐文章于 2026-04-10 11:06:48 发布 3.8k 阅读 AI 写同款· GEO 优化 ›

vue3.0+ts+element-plus多页签应用模板：vue-router与vuex 目录系列链接一、目录结构二、安装vue-router三、安装vuex四、改写main.ts五、篇章小结系列链接第一章——vue3.0+ts+element-plus多页签应用模板：项目搭建篇第二章——vue3.0+ts+element-plus多页签应用模板：安装vue-router与vuex篇一、目录结构现在，你的目录结构应该是这样的 (忽略node_modules)： ├── config # 配置文件 | ├── dev.config.js 阅读详情

在这里插入图片描述

模块代码


export default{
    namespaced: true,
    state: {
        token:'1111111111111111111111111111'
    },
    mutations: {
    },
    actions: {
    },
   
}

store的index.js

import Vuex from 'vuex'
import persistedstate from 'vuex-persistedstate';
import user from './modules/user'
import aa from './modules/aa'
export default Vuex.createStore({
  //持久化   默认localhost   换成sesstion
  plugins: [persistedstate({
    storage: window.sessionStorage
  })],
  //模块导入
  modules:{
    user,
    aa
  },
  state: {
    tt:'clmsadlkmcklasmlckmnsalcnlskdmcl;msalkcjsd;klncksdnkjc'
  },
  mutations: {
  },
  actions: {
  },
});

使用

import router from '@/router/index'
import { computed, getCurrentInstance  } from 'vue'
//引入useStore
import { useStore} from 'vuex'
export default {
  setup(props,context){
    //执行useStore函数
    const store = useStore();
    console.log(store.state.aa.name)
    let clickHandl = () =>{
      //触发mutations
      store.commit('aa/setName',"改变后的name值")
      console.log(store.state.aa.name)
    }
    return{
      clickHandl,
    }
  }
}