DAY7 资料室--Vuex是个虾咪东东？

前言

曾几何时，你有没有对元件中资料调用感到困扰呢？
同阶层的元件资料传递，需要使用 Event Bus，确实满不好管理的。
或是相同的资料，需要在很多元件中去做变动时，变动到自己脑子都花了。
如果有一个资料库，可以统一让我们去做管理这些资料，该有多好？
就在这时候，Vuex 来了！听说他可以解决我们的问题，让我们来一起看看吧！

Vuex 状态

此张图片取自官网，若我们可以先看懂这张图片，便能理解Vuex资料状态管理模式了。
可以看到图片中多了几个陌生的单字，是我们在Vue中没有使用过的，别担心，我们一一研究吧！

我们平常使用的 Vue 跟 Vuex 其实有很多相似之处，毕竟是同一个生态系的，所以我做一个对照图让大家比较好联想。
Vuex 就像把 Vue 资料处理的部分单独拿出来，独立成资料处理威力加强版。

我们可以先当作有一个专门放资料的元件，叫做 store ，也可以把它当成 Event Bus plus。
那在这个 store 当中，我们一样可以建立 data 放资料，建立 methods 放置方法用来处理资料，建立 computed 计算属性，只是一切都换了个名字，而且变得更严谨了一些。

state

跟 Vue 元件的 data 有87%相像，就是拿来放资料的地方，没有错啦！
只是 Vuex 使用单一状态树，什麽意思？简单说，就是所有元件都共用这笔资料，资料都是唯一的。
如何建立 state 呢？ 那我们就先来创造一个 store 看看吧！
先建立一个 store 资料夹，在其中新增 index.js 档案，我们的第一个 store 就建立完成罗！

之後我们可以开始建立资料了，像这样：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  }
})

这样我们就拥有了第一笔名为 count 的资料，他目前的值为0。
那我们要怎麽修改这笔资料呢？
就需要使用 mutation 罗！

mutation

这边就是 Vue 跟 Vuex 比较不同的地方了，只要想更动资料，就是需要使用 mutation 里面的方法才可以唷！

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

像这样我们就在 mutation 里面新增了我们第一个更改资料的方法了。
increment (state) ，可以看到我们将 state 传入，便是传入我们实际要更改资料值的地方。
除了 state 之外，我们也可以传入其他参数，比如说：

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

像这样，就可以传入我们要增加多少数量，并透过此方法做资料的更改，而这第二个参数就叫载荷（Payload）。

如何在元件中使用 store 资料呢？

刚刚我们有了第一笔资料，也拥有了一个更动资料的方法，那我们到底要怎麽在元件中使用呢？
首先我们必须在 main.js 启用 Vuex，并 import 我们刚刚创立的 store

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'

告诉 Vue，我们要使用这个 store 的资料

new Vue({
  el: '#app',
  store: store,
})

我们可以在 computed 使用 this.$store.state 用以取得放在 store.state 的资料

computed: {
    count () {
      return this.$store.state.count
    }

也可以透过 commit 使用我们刚刚设定在 mutations 的方法，修改 state 资料

methods: {
  increment() {
    this.$store.commit('increment')
  }
}

以上是简单的 Vuex 入门，让我们先大概理解 State 、 Mutation 是做什麽的
只是以上的范例，也并不完全是正确用法，我们可以发现目前的使用配置并不符合官方提供的 Vuex 状态图片
Vue 的元件应该透过 Action 去修改 Store 的资料，而不是直接使用 commit()
那到底要怎麽做呢？明天我们继续研究！