Vuex 是甚么？
Vuex 是两个专为 Vue.js 应用领域软件开发的状况区域化 + 库。它选用封闭式repeats应用领域的大部份模块的状况，并以适当的准则确保状况以一类可预估的形式发生改变。
两张图介绍Vuex
Vuex 的四个特性及选用形式
一、State
虽然 Vuex 的状况储存是积极响应式的，从 store 示例中加载状况最简单的形式是在排序特性中回到某一状况：
// 建立两个 Counter 模块 const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return this.$store.state.count } } }每每 this.$store.state.count 变动的这时候, 单厢再次求得排序特性，因此促发预览密切相关的 DOM。
二、Getters
Vuex 容许他们在 store 中表述“getter”（能指出是 store 的排序特性）。
const store = createStore({ state: { todos: [ { id: 1, text: …, done: true }, { id: 2, text: …, done: false } ] }, getters: { doneTodos: (state) => { return state.todos.filter(todo => todo.done) } } })import { mapGetters } from vuex export default { // … computed: { // 选用对象展开运算符将 getter 混入 computed 对象中 …mapGetters([ doneTodos, // … ]) } }三、Mutation
更改 Vuex 的 store 中的状况的唯一形式是提交 mutation。
const store = createStore({ state: { count: 1 }, mutations: { increment (state) { // 变更状况 state.count++ } } })你不能直接调用两个 mutation 处理函数。这个选项更像是事件注册：“当促发两个类型为increment的 mutation 时，调用此函数。”要唤醒两个 mutation 处理函数，你需要以适当的 type 调用store.commit 形式：
store.commit(increment)四、Action
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状况。Action 能包含任意异步操作。让他们来注册两个简单的 action：
const store = createStore({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit(increment) } } })Action 通过 store.dispatch 形式促发：
store.dispatch(increment)五、Module
虽然选用单一状况树，应用领域的大部份状况会集中到两个比较大的对象。当应用领域变得非常复杂时，store 对象就有可能变得相当臃肿。
const moduleA = { state: () => ({ … }), mutations: { … }, actions: { … }, getters: { … } } const moduleB = { state: () => ({ … }), mutations: { … }, actions: { … } } const store = createStore({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状况 store.state.b // -> moduleB 的状况tips:
当刷新页面,项目再次加载,Vuex 会重置,大部份状况回到初始状况,选用 vuex-persistedstate 能避免这种情况发生。
1.安装
npm install –save vuex-persistedstate2.配置
在Vuex初始化这时候，作为模块引入。
import persistedState from vuex-persistedstate export default new Vuex.Store({ // … plugins: [persistedState()] })
