中央状态指挥中心- Vuex [续]

Vuex 结构分为 state getters mutations actions 四个部分

State

Vuex 使用 single state tree 单一状态树，一个包含应用程序状态的物件。使用 computed 属性来向 store 取得资料

ex:

// let's create a Counter component
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

当 store.state.count 改变，会让 computed 属性重新被计算，并触发相关的 DOM 更新。

这样的模式会让元件依赖於属於全域的 store，当使用模组化系统来管理时，必须要在每一个有使用到 store state 的元件中去载入 store。

於是，vuex 提供一个机制，注入(inject) store 到所有的子元件中

const app = new Vue({
  el: '#app',
  store, // 加入这个 store option，store 就会被注入到所有子元件中
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count  // 可以使用 this.$store
    }
  }
}

Getters

store 的 computed

例如: 取得状态後还要去过滤资料

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果有多个元件都需要这个过滤後的值，除了把这样 filter function 逻辑重复写在要使用的元件外，还可以使用 getters ，将结果先算好，元件直接来拿值就好
ex:

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

元件中取用 getters 结果

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount 
  }
}

Mutations

变更 state 唯一的方法！ 类似 event 的作用

每一个　mutation 都有一个 type 和 handler function

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // mutate state
      state.count++
    }
  }
})

要执行 mutation 的 handler，就得呼叫 store.commit

store.commit('increment')

也可以传入额外的物件 (payload) 给 store.commit

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})

Actions

类似 mutations，但 actions 不能用来改

变 state，actions 是用来发出 commit 去呼叫 mutations

注册一个 action
ex:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

传入 action 的 context 物件具有和 store 一样的方法/属性，所以可以使用 context.commit 来 commit mutation。也可以用 context.state context.getters 来取得 state 和 getters。

使用 store.dispatch 来触发 actions
ex: