lbPro0 2019-11-18
1.插件
因为vuex是存在内存中的,所以刷新页面的时候其中的值就会初始化。为了刷新时不让其改变,可以开发一个插件,把state状态都存在本地中。
saveInLocal.js:
export default store => { if (localStorage.state) store.replaceState(JSON.parse(localStorage.state)) store.subscribe((mutation, state) => { localStorage.state = JSON.stringify(state) }) }
在store文件夹中的index.js 添加代码:
import saveInLocal from './plugin/saveInLocal' Vue.use(Vuex) export default new Vuex.Store({ //... plugins: [ saveInLocal ] })
2.严格模式
开启严格模式,仅需在创建 store 的时候传入 strict: true:
const store = new Vuex.Store({ // ... strict: true })
在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
3.vuex + 双向绑定
必须承认,这样做比简单地使用“v-model + 局部状态”要啰嗦得多,并且也损失了一些 v-model 中很有用的特性。另一个方法是使用带有 setter 的双向绑定计算属性:
<input v-model="message"> // ... computed: { message: { get () { return this.$store.state.obj.message }, set (value) { this.$store.commit('updateMessage', value) } } }