Vuex localStorage的具体使用

当使用Vuex时，我们经常需要将数据在页面刷新后保留下来，此时，可以使用HTML5的localStorage进行本地存储。Vuex为我们提供了相应的方法来实现此功能。

在Vuex中，使用localStorage可以将状态永久存储在本地，当用户刷新页面、关闭浏览器时，状态不会丢失。Vuex提供store.subscribe方法，我们可以通过该方法监听Vuex的变化，用localStorage来更新和记录这些变化，实现状态的持久化存储。

首先，需要在localStorage中存储数据，可以使用以下代码：

const localStoragePlugin = store => {
    store.subscribe((mutation, state) => {
        window.localStorage.setItem('myApp', JSON.stringify(state.myApp));
    });
};

const store = new Vuex.Store({
    state: {
        myApp: {}
        // 你的全局变量
    },
    mutations: {
        // 你的mutation
    },
    plugins: [localStoragePlugin],
});

在这里，我们在Vuex的配置中添加了一个localStoragePlugin插件，该插件监听每个mutation，当mutation发生时，将state序列化为JSON字符串，然后存储到浏览器本地的localStorage中。此时，可以通过window.localStorage.getItem()方法获取存储在localStorage中的数据。

但当你重新加载页面时，需要从localStorage中将已经存储的数据重新加载到应用程序中，以此保持永久状态。可以使用以下代码：

const localState = JSON.parse(window.localStorage.getItem('myApp')) || {};

const store = new Vuex.Store({
    state: {
        myApp: localState
    },
    mutations: {
        // 你的mutation
    },
    plugins: [localStoragePlugin],
});

在这里，我们首先使用getItem()方法从localStorage中获取当前状态。如果localStorage中没有相应的状态，则默认为一个空对象。然后我们将该状态保存到Vuex的初始状态中。接下来我们实例化一个新的store对象，并使用localStoragePlugin插件，该插件在mutation变化时会自动将状态存储到localStorage中。

示例1：

下面的示例展示如何通过Vuex和localStorage来存储和检索计数器。

const localStoragePlugin = store => {
    store.subscribe((mutation, state) => {
        window.localStorage.setItem('count', JSON.stringify(state.count));
    });
};

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        },
        decrement(state) {
            state.count--;
        }
    },
    plugins: [localStoragePlugin],
});

const app = new Vue({
    el: '#app',
    store,
    data: {},
    methods: {
        increment() {
            this.$store.commit('increment');
        },
        decrement() {
            this.$store.commit('decrement');
        }
    },
    computed: {
        count() {
            return this.$store.state.count
        }
    }
});

在这个例子中，我们先定义了一个localStoragePlugin，用于将Vuex的状态持久化到localStorage中。然后我们创建一个名为store的Vuex store对象，并将其传递给Vue实例，Vue实例中包含一个increment和decrement方法，这两个方法用于增加或减少计数器的数量，并使用$store.commit方法将其提交到Vuex store中。最后，我们定义了一个计算属性，用于获取当前计数器的值。

示例2：

下面的示例展示如何使用localStorage在Vuex store中存储用户token。

const localStoragePlugin = store => {
    store.subscribe((mutation, state) => {
        if (mutation.type === 'setToken') {
            window.localStorage.setItem('token', state.token);
        } else if (mutation.type === 'clearToken') {
            window.localStorage.removeItem('token');
        }
    });
};

const store = new Vuex.Store({
    state: {
        token: window.localStorage.getItem('token') || ''
    },
    mutations: {
        setToken(state, token) {
            state.token = token;
        },
        clearToken(state) {
            state.token = '';
        }
    },
    plugins: [localStoragePlugin],
});

const app = new Vue({
    el: '#app',
    store,
    data: {},
    methods: {
        setToken(token) {
            this.$store.commit('setToken', token);
        },
        clearToken() {
            this.$store.commit('clearToken');
        }
    },
    computed: {
        token() {
            return this.$store.state.token;
        }
    }
});

在这个例子中，我们先定义了一个localStoragePlugin，用于将Vuex的状态持久化到localStorage中。然后我们创建一个名为store的Vuex store对象，并将其传递给Vue实例，Vue实例中包含了一个setToken和clearToken方法，分别用于设置或清除用户token，并且使用了$store.commit来将数据提交到Vuex store中。最后，我们定义了一个计算属性，用于获取当前的用户token。