vuex-persistedstate 一个对 localstorage / sessionStorage 操作的vue插件
vue-storage-watcher
### 安装
```js
npm install --save vuex-persistedstate
```
### 配置使用
* 在vuex初始化时候，作为组件引入。
```js
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
const store = new Vuex.Store({
// ...
plugins: [createPersistedState()],
});
```
* 我在nuxt中使用
```js
// nuxt.config.js
plugins: [
{src: "~/plugins/vuexPersistence.js", ssr: false}
]
// vuexPersistence.js
import createPersistedState from 'vuex-persistedstate'
export default function ({store}) {
createPersistedState({
key:'HUODONG',
reducer: (vuexState) => {
return {
signIn: vuexState.signIn // store中的signIn模块
}
},
})(store)
}
// 页面取值
import { mapState } from 'vuex'
computed: {
...mapState({
signIn: state => state.signIn
})
}
```
### 自定义存储方式
* vuex-persistedstate默认使用localStorage来固化数据，一些特殊情况要如何应对呢？（如：safari的无痕浏览模式）
```js
// 需要使用sessionStorage的情况
plugins: [
persistedState({ storage: window.sessionStorage })
]
```
```js
// 使用cookie的情况
import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
// ...
plugins: [
persistedState({
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
removeItem: key => Cookies.remove(key)
}
})
]
})
```
[vuex-persistedstate](https://github.com/robinvdvleuten/vuex-persistedstate)
[js-cookie](https://github.com/js-cookie/js-cookie)
网友评论