# vuex-persistedstate
在頁面重新加載之間堅持并重新補充您的[Vuex](http://vuex.vuejs.org/)狀態。
## 安裝
`npm i -S vuex-persistedstate`
## 示例
```
import Vue from 'vue'
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
plugins: [createPersistedState()],
mutations: {
increment: state => state.count++,
decrement: state => state.count--
}
});
new Vue({
el: '#app',
computed: {
count() {
return store.state.count;
}
},
methods: {
increment() {
store.commit('increment');
},
decrement() {
store.commit('decrement');
}
}
});
```
## 自定義存儲方式
`vuex-persistedstate`默認使用`localStorage`來固化數據,一些特殊情況要如何應對呢?(如:safari的無痕瀏覽模式)
> 需要使用`sessionStorage`的情況
~~~javascript
plugins: [
persistedState({ storage: window.sessionStorage })
]
~~~
> 使用`cookie`的情況
~~~javascript
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)
}
})
]
})
~~~