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)
}
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。