uniapp持久化vuex
时间: 2023-10-06 17:10:04 浏览: 66
要在uni-app中实现类似vuex-persistedstate插件的持久化功能,可以按照以下步骤操作:
1. 在项目目录下执行以下命令安装vuex-persistedstate插件:
```
npm install --save vuex-persistedstate
```
2. 在store/index.js文件中引入vuex和vuex-persistedstate插件,并使用它:
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
plugins: [
persistedState({
storage: {
getItem: key => uni.getStorageSync(key),
setItem: (key, value) => uni.setStorageSync(key, value),
removeItem: key => uni.removeStorageSync(key)
}
})
],
state: {
"username": '',
"userid": ''
},
mutations: {
//...
},
actions: {
//...
},
// ...
})
export default store
```
3. 使用完插件后,可以在浏览器中打开并使用控制台调试,通过查看window.localStorage.vuex可以看到数据已经存放在localStorage中了。如果需要进一步了解uni-app提供的数据缓存API的使用,请参考官方文档链接:https://uniapp.dcloud.io/api/storage/storage.html