uniapp-vue3实现vuex持久化存储
·
参考vuex文档:State | Vuex
npm i vuex@4.1.0 vuex-persistedstate@4.1.0 mp-storage@1.0.3
/store/userInfo.js
const initState = {
token: '',
}
export default {
namespaced: true,
state: {
...initState,
apptype: "H5",
},
mutations: {
setToken(state, token) {
state.token = token;
},
setApptype(state, apptype) {
state.apptype = apptype;
},
resetStates(state) {
Object.assign(state, initState)
},
},
actions: {
// 恢复state的原始值
resetStates: function(context) {
context.commit('resetStates');
}
},
getters: {
token: state => state.token,
}
}
/store/index.js
paths:指定的模块存储在本地
import createPersistedState from 'vuex-persistedstate'
import {
localStorage
} from 'mp-storage'
import userInfo from './userInfo'
import {
createStore
} from 'vuex'
export default createStore({
...userInfo,
plugins: [createPersistedState({
storage: localStorage,
paths: ['token', ]
})]
})
main.js
import store from '@/store'
export function createApp() {
const app = createSSRApp(App)
app.use(store).use(uviewPlus).use(i18n).mixin(tools).mixin(share)
return {
app
}
}
页面代码
onLoad() {
this.$store.commit("setToken", "123")
},
效果图

更多推荐

所有评论(0)