vue3.0 vuex 全局状态管理

vue3.0 vuex 全局状态管理 vue与js中的使用方法和引入方法

1.

/store/index.js 文件中

引入vuex 并写入相关操作 并暴露出去

import { createStore } from "vuex";
import { SET_USER_INFO } from "./mutation-types";

const state = {
    userInfo:{}, //用户信息
};

const mutations = {
    [SET_USER_INFO](state, payload) {
        // 设置用户信息
        state.userInfo = payload;
    }
};

const actions = {
       
    setUserInfo({commit},payload) {
        //设置用户信息
        commit(SET_USER_INFO,payload);
    }

};

export default createStore({
    state,
    mutations,
    actions
});

2.

在/store/mutation-types.js  文件中定义 属性

// 清除用户信息
export const CLEAR_USER = "CLEAR_USER";
// 存储用户信息
export const SET_USER = "SET_USER";
// 存储路由菜单
export const SET_ROUTES = "SET_ROUTES";

// 存储用户信息
export const SET_USER_INFO = "SET_USER_INFO";

// 存储菜单栏信息
export const SET_HTSYS_MENU = "SET_HTSYS_MENU";

3.在vue页面中使用

//引入vuex
import { useStore } from "vuex";

并在 setup 中初始化 vuex
const store = useStore();

//使用方法 setUserInfo  就是index.js中定义的方法
store.dispatch("setUserInfo",res.data.htSysManage);
//获取,直接引入文件,并直接点下去
console.log(store.state.userInfo)//这里就能获取到数据

4.

若是js文件中,我在router 中获取api中的菜单栏路由,此时我就在js中使用vuex

//在当前js文件中引入import store from "../store";

设置数据方法store.dispatch("setUserInfo",JSON.parse(sessionStorage.getItem('userInfo'))); //用户信息

获取数据方法
console.log('全局——————',store.state.userInfo)//这里获取方法和vue中类似的