npm install vuex@next vuex-persistedstate --force

// store/index.js
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

export default createStore({
  state: {
    userInfo: {},
  },
  mutations: {
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo
    },
    LOGOUT_CLEAR(state) {
      state.userInfo = {}
    }
  },
  actions: {
    setUserInfo({ commit }, userInfo) {
      commit('SET_USER_INFO', userInfo)
    },
    logout({ commit }) {
      commit('LOGOUT_CLEAR')
    }
  },
  getters: {
    getUserInfo: state => state.userInfo
  },
  plugins: [createPersistedState()]
})

// main.ts
import store from './store'
app.use(store)
// 存入
import { useStore } from 'vuex'
const store = useStore()
store.dispatch('setUserInfo', data)

// 获取
const userInfo = computed(() => store.getters.getUserInfo)

// 清空
store.dispatch('logout')
Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐