Vuex 的使用方式（初級版）

• vuex 的使用場景: 例如：幾個不相關的元件想要共享一個資料的狀態 -> Vuex 官方文件的說話是當遇到 ·多個元件共享狀態時·可以用到Vuex

• 

  來自官方文件的圖片.png
• state 可以理解為是所有組建想要共享的資料
• mutations 是定義改變 state 的資料
• actions 是什麼時候改變 state 的資料 -> 提交 commit
• 總結就是: 資料放在 state 裡，怎麼改變通過 mutations 進行改變，什麼時候改變的行為都放在 actions

1. Vue 模板 render 資料 (state)
2. components 接受使用者的互動，觸發 actions ，通過 dispatch 觸發

• Vuex 小例子:
  • main.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  count: 1
}

const mutations = {
  increment (state) {
    state.count += 1
  },
  decrement (state) {
    state.count -= 1
  }
}

const actions = {
  increment: ({commit}) => {
    commit('increment')
  },
  decrement: ({commit}) => {
    commit('decrement')
  }
}
const store = new Vuex.Store({
  state,
  mutations,
  actions
})
new Vue({
  el: '#app',
  render (h) {
    return h(App)
  },
  store
})

• app.js

  <template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>{{ $store.state.count }}</div>
    <button @click="increment">增加</button>
    <button @click="decrement">減少</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'App',
  data () {
    return {
      msg: 'hello world'
    }
  },
  methods: mapActions([
    'increment',
    'decrement'
  ])
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>