正如Redux一樣，當你不知道是否需要Vuex那就是不需要。不要因為想用Vuex而使用它。

用過Vue的人都知道，Vuex是Vue的一個全局狀態管理模塊，它的作用是多個組件共享狀態及數據，當某個組件將全局狀態修改時，在綁定了該狀態的另一個組件也將響應。實際上可以將Vue理解為一個function，在Vue的作用域中有一個數據代理，在每個Vue的實例中都能對其讀和寫



我們都知道Vue的數據驅動原理是用Object.defineProperty()進行數據代理，在setter中對數據綁定的view進行異步響應（vue3.0則是使用proxy）

通過查看Vuex源碼可知Vuex的核心原理就是在Vue的beforeCreate鉤子前混入（mixin）Vuex，并在init中將$store屬性注冊到Vue中





為了使案例更具體，我這還是簡單使用腳手架搭了個項目（可參考另一篇文章），雖然只有兩個組件，但是能清晰的理解其用法，我的src目錄如下，除了最基礎的App.vue和main.js外只有兩個組件和一個store



先說明一下兩個組件的作用，第一個組件是輸入框，在里面輸入字符，在二個組件div中顯示，就是這么簡單

首先我們使用常規方式(EventBus)實現一下，這里只需要在mainjs中創建一個vue實例，然后注冊在vue中就可以通過事件emit和on來進行組件通信

main.js

import Vue
  from 'vue'
import App
  from './App'
Vue.prototype.$eventBus = new Vue()
 
new Vue({
  el: '#app',
  components: {App},
  template: '<App/>'
})
<template>
  <div>
    {{
      val
    }}
  </div>
</template>
 
<script>
export default {
  name: "divComp",
  data () {
    return {
      val: ''
    }
  },
  mounted () {
    this.$eventBus.$on('changeVal', (e) => {//監聽輸入事件通過eventBus傳遞信息
      this.val = e
    })
  }
}
</script>
 
<style
  scoped>
 
</style>

如果到這一步，你仍然感覺難度不大，那么恭喜你，Vuex的使用已經掌握了一大半了

下面，我們來說說actions，在說actions之前，我們先回顧一下mutations，mutations中注冊了一些事件，在組件中通過emit對事件進行觸發，達到處理異步且解耦的效果，然而官方并不推薦我們直接對store進行操作
官方對actions的說明是：Action 類似于 mutation，不同在于1.Action 提交的是 mutation，而不是直接變更狀態。2.Action 可以包含任意異步操作。

也就是說，我們要把組件中的emit操作放到actions中，而在組件中通過某些方式來觸發actions中的函數間接調用emit，此時，為了讓action更直觀，我們添加一個清除輸入框字符的方法，當點擊清除按鈕時清除state.val
在輸入框組件中將value綁定到state上

<template>
  <input type="text" @input="inputHandler" :value="this.$store.state.val" />
</template>
 
<script>
export default {
  name: "inputComp",
  methods: {
    inputHandler(e) {
      this.$store.dispatch("actionVal", e.target.value);
    },
  },
};
</script>
 
<style
  scoped>
</style>
在另一個顯示數據的組件中新增刪除按鈕并綁定刪除事件，通過dispatch告知store并通過emit操作state

<template>
  <div>
    <button @click="clickHandler">清除</button>
    <span>{{ this.$store.state.val + this.$store.getters.getValueLength }}</span>
  </div>
</template>
 
<script>
export default {
  name: "divComp",
  methods: {
    clickHandler(){
      this.$store.dispatch('actionClearVal')
    }
  },
};
</script>
 
<style
  scoped>
</style>
最后在store中新建刪除的actions和mutations

import Vue
from "vue";
import Vuex
from "vuex";
 
Vue.use(Vuex);
const state = {
  val: ''
}
 
const mutations = {
  changeVal(state, _val) {
    state.val = _val
  },
  clearVal(state, _val) {
    state.val = ''
  }
}
const actions = {
  actionVal(state, _val) {
    state.commit('changeVal', _val)
  },
  actionClearVal(state) {
    state.commit('clearVal')
  }
}
const getters = {
  getValueLength(state) {
    return `長度：${state.val.length}`
  }
}
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})
最終效果如下：


到這里為止，Vuex的基本用法就介紹完畢了。
然而除此之外，Vuex官方還提供了輔助函數（mapState,mapMutations,mapGetters,mapActions）和Modules（store的子模塊，當有許多全局狀態時，我們為了避免代碼臃腫，就可以將各個store分割成模塊）方便我們書寫
下面我們用輔助函數重新實現一下上述功能
輸入框：

<template>
  <input type="text" @input="inputHandler" :value="value" />
</template>
 
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "inputComp",
  computed: {
    ...mapState({ value: "val" }),
  },
  methods: {
    ...mapMutations({ sendParams: "changeVal" }), // sendParams用來傳遞參數,先把sendParams注冊到mutations上，輸入時觸發sendParams
    inputHandler(e) {
      this.sendParams(e.target.value);
    },
  },
};
</script>
 
<style
  scoped>
</style>
顯示框：

<template>
  <div>
    <button @click="clickHandler">清除</button>
    <span>{{ value + valueLength }}</span>
  </div>
</template>
 
<script>
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  name: "divComp",
  computed: {
    ...mapState({ value: "val" }),
    ...mapGetters({ valueLength: "getValueLength" }),
  },
  methods: {
    ...mapActions({ clickHandler: "actionClearVal" }),
  },
};
</script>
 
<style
  scoped>
</style>

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務