用过 vuex 的肯定会有这样一个痛点，就是刷新以后 vuex 里面存储的 state 就会被浏览器释放掉，因为我们的 state 都是存储在内存中的。
所以我们通过 vuex-persist 这个插件，来实现将数据存储到本地。
原理大家都懂，就是存 localStorage
1. 安装持久化插件
npm install --save vuex-persist
vuex-persistedstate 已经没有了，使用的是 vuex-persist。
2. store.js
store.js：
import Vue from "vue";
import Vuex from "vuex";
// 引入
import VuexPersistence from "vuex-persist";
Vue.use(Vuex);
// 先创建一个对象并进行配置
const vuexPersist = new VuexPersistence({
strictMode: true,
storage: localStorage, // 存入localStorage
reducer: state => ({
query: state.query // 这个就是存入localStorage的值
})
});
// 引入进vuex插件
const store = new Vuex.Store({
state: {
user: { name: "123" },
navigation: { path: "/home" },
query: ""
},
mutations: {
RESTORE_MUTATION: vuexPersist.RESTORE_MUTATION, // this mutation **MUST** be named "RESTORE_MUTATION"
setQuery(state, query) {
state.query = query;
}
},
actions: {},
plugins: [vuexPersist.plugin]
});
export default store;
// export default new Vuex.Store({
// state: {
// username: "123"
// },
// mutations: {},
// actions: {},
// plugins: [vuexLocal.plugin]
// });
3. 在其他组件中使用
Home.vue：
<template>
<div class="home">home query: {{ query }}</div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
name: "home",
components: {
// HelloWorld
},
methods: {
...mapMutations(["setQuery"])
},
created() {
this.setQuery("home");
},
computed: {
...mapState(["query"])
}
};
</script>
About.vue：
<template>
<div class="about">about query: {{ query }}</div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
data() {
return {};
},
methods: {
...mapMutations(["setQuery"])
},
created() {
this.setQuery("about");
},
computed: {
...mapState(["query"])
}
};
</script>
App.vue：
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home1</router-link> |
<router-link to="/about">About1</router-link> |
<span>query: {{ query }}</span>
</div>
<router-view />
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
data() {
return {};
},
mounted() {},
computed: {
...mapState(["query"])
}
};
</script>
主要是靠 mapState 来取公共状态的值。
computed: {
...mapState(["query"])
}
