正如Redux一樣，當(dāng)你不知道是否需要Vuex那就是不需要。不要因?yàn)橄胗肰uex而使用它。

用過(guò)Vue的人都知道，Vuex是Vue的一個(gè)全局狀態(tài)管理模塊，它的作用是多個(gè)組件共享狀態(tài)及數(shù)據(jù)，當(dāng)某個(gè)組件將全局狀態(tài)修改時(shí)，在綁定了該狀態(tài)的另一個(gè)組件也將響應(yīng)。實(shí)際上可以將Vue理解為一個(gè)function，在Vue的作用域中有一個(gè)數(shù)據(jù)代理，在每個(gè)Vue的實(shí)例中都能對(duì)其讀和寫(xiě)



我們都知道Vue的數(shù)據(jù)驅(qū)動(dòng)原理是用Object.defineProperty()進(jìn)行數(shù)據(jù)代理，在setter中對(duì)數(shù)據(jù)綁定的view進(jìn)行異步響應(yīng)（vue3.0則是使用proxy）

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





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



先說(shuō)明一下兩個(gè)組件的作用，第一個(gè)組件是輸入框，在里面輸入字符，在二個(gè)組件div中顯示，就是這么簡(jiǎn)單

首先我們使用常規(guī)方式(EventBus)實(shí)現(xiàn)一下，這里只需要在mainjs中創(chuàng)建一個(gè)vue實(shí)例，然后注冊(cè)在vue中就可以通過(guò)事件emit和on來(lái)進(jìn)行組件通信

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) => {//監(jiān)聽(tīng)輸入事件通過(guò)eventBus傳遞信息
      this.val = e
    })
  }
}
</script>
 
<style
  scoped>
 
</style>

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

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

也就是說(shuō)，我們要把組件中的emit操作放到actions中，而在組件中通過(guò)某些方式來(lái)觸發(fā)actions中的函數(shù)間接調(diào)用emit，此時(shí)，為了讓action更直觀，我們添加一個(gè)清除輸入框字符的方法，當(dāng)點(diǎn)擊清除按鈕時(shí)清除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>
在另一個(gè)顯示數(shù)據(jù)的組件中新增刪除按鈕并綁定刪除事件，通過(guò)dispatch告知store并通過(guò)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 `長(zhǎng)度：${state.val.length}`
  }
}
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})
最終效果如下：


到這里為止，Vuex的基本用法就介紹完畢了。
然而除此之外，Vuex官方還提供了輔助函數(shù)（mapState,mapMutations,mapGetters,mapActions）和Modules（store的子模塊，當(dāng)有許多全局狀態(tài)時(shí)，我們?yōu)榱吮苊獯a臃腫，就可以將各個(gè)store分割成模塊）方便我們書(shū)寫(xiě)
下面我們用輔助函數(shù)重新實(shí)現(xiàn)一下上述功能
輸入框：

<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用來(lái)傳遞參數(shù),先把sendParams注冊(cè)到mutations上，輸入時(shí)觸發(fā)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>

藍(lán)藍(lán)設(shè)計(jì)( www.li-bodun.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)