Vuex 数据持久化

1. 刷新后，Vuex 中的数据丢失

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        token: 'x'
    },
    mutations: {
        setToken(state, uname) {
            state.token = uname;
        }
    }
});

HelloWorld.vue

<template>
  <div>
    <h1>{{ token }}</h1>
    <button @click="setToken('ifer')">update uname</button>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  name: 'HelloWorld',
  computed: {
    ...mapState(['token'])
  },
  methods: {
    ...mapMutations(['setToken'])
  }
};
</script>

2. 手动解决

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        token: localStorage.getItem('TOKEN') || 'x'
    },
    mutations: {
        setToken(state, uname) {
            state.token = uname;
            localStorage.setItem('TOKEN', uname);
        }
    }
});

3. 插件解决

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        token: 'x'
    },
    mutations: {
        setToken(state, uname) {
            state.token = uname;
        }
    },
    plugins: [
        createPersistedState({
            // 默认存到了 localStorage，可以通过 storage 指定位置
            storage: sessionStorage
        })
    ]
});

存到 cookie

yarn add js-cookie

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
import Cookies from 'js-cookie';
Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        token: 'x'
    },
    mutations: {
        setToken(state, uname) {
            state.token = uname;
        }
    },
    plugins: [
        createPersistedState({
            storage: {
                getItem: (key) => Cookies.get(key),
                setItem: (key, value) => Cookies.set(key, value, {
                    expires: 7
                }),
                removeItem: (key) => Cookies.remove(key)
            }
        })
    ]
});