vuex-persistedstate让vuex数据持久化

1.安装vuex-persistedstate

npm i vuex-persistedstate

2.在store/index.js中引入

import createPersistedState from "vuex-persistedstate"

3.使用vuex-persistedstate

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate"export default createStore({state: {id: '',userAccount: '',userAvatar: '',userName: '',userRole: '',gender: '',phone: '',},mutations: {setUserAccount: (state, payload) => {state.userAccount = payload.value;},setId: (state,payload) => {state.id = payload.value},setUserAvatar: (state,payload) => {state.userAvatar = payload.value},setUserName: (state,payload) => {state.userName = payload.value},setUserRole: (state,payload) => {state.userRole = payload.value},setGender: (state,payload) =>{state.gender = payload.value},setPhone: (state,payload) =>{state.phone = payload.value},},actions: {},modules: {},plugins:[createPersistedState({storage: window.sessionStorage,reducer(val){return{id: val.id,userAccount: val.userAccount,userAvatar: val.userAvatar,userName: val.userName,userRole: val.userRole,gender: val.gender,phone: val.phone,}}})]
})

4.获取值

const store = useStore()
state.userName = store.state.userName
state.userAccount = store.state.userAccount
state.userAvatar = store.state.userAvatar
state.userId = store.state.id
state.userPhone = store.state.phone

5.修改值

 const store = useStore();store.commit("setUserAccount",{value: state.user.userAccount})store.commit("setId",{value: state.user.id})store.commit("setUserName",{value: state.user.userName})store.commit("setUserAvatar",{value: state.user.userAvatar})store.commit("setUserRole",{value: state.user.userRole})store.commit("setPhone",{value: state.user.phone})