vue3.0 Vuex模块化管理

vue3.0 Vuex模块化管理_第1张图片

模块代码


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

你可能感兴趣的:(vue3.0 Vuex模块化管理)