vue3.0 Vuex模块化管理

最新推荐文章于 2025-05-28 00:54:29 发布

一天28小时

最新推荐文章于 2025-05-28 00:54:29 发布

阅读量3.7k

点赞数 1

本文链接：https://blog.csdn.net/Programmerwhite/article/details/109082069

版权

本文介绍了如何在Vue应用中使用Vuex进行模块化的状态管理，并展示了如何通过vuex-persistedstate插件实现状态的本地持久化。重点讲解了state、mutations、actions的定义以及在store和组件中的使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

模块代码


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,
    }
  }
}