1.背景

天涯ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

最近在做一個單頁面的管理后臺項(xiàng)目，為了提高開發(fā)效率，使用了Vue框架來開發(fā)。為了使各個部分的功能，獨(dú)立結(jié)構(gòu)更加清晰，于是就拆分了很多組件，但是組件與組件之間數(shù)據(jù)共享成了一個問題，父子組件實(shí)現(xiàn)起來相對簡單，prop，$emit，$on就能搞定。除此之外，有很多兄弟組件和跨多級組件，實(shí)現(xiàn)起來過程繁瑣，在多人協(xié)同開發(fā)上，不利于統(tǒng)一管理，于是，開始了Vue的生態(tài)之一的Vux實(shí)踐之旅。

2.概述

每一個 Vuex 應(yīng)用的核心就是 store（倉庫）。“store”基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。

Vuex 和單純的全局對象有以下兩點(diǎn)不同：

1.Vuex 的狀態(tài)存儲是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新；2.你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用

3.安裝使用

3.1.使用Vue-cli開發(fā)安裝vue包

cnpm install vuex --save

3.2.在src目錄下創(chuàng)建store文件夾并創(chuàng)建index.js如下(src/store/index.js)

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

Vue.use(Vuex);

export default new Vuex.Store({
 state: {

 },
 getters: {

 },
 mutations: {

 },
 actions: {

 }
});

然后在src文件下的main.js中使用

import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false


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

4.用法簡介

 4.1.state

state是保存共享數(shù)據(jù)的，現(xiàn)在改store/index.js如下：

state: {
  count:0
 },

在components目錄下創(chuàng)建Index.vue如：

結(jié)果如下：

我們可以通過組件的計(jì)算屬性來保存state里面的值，那么問題來了，如果store太多的話，我們組件里面的計(jì)算屬性豈不是成了這個樣子：

computed:{
 count(){
   return this.$store.state.count;
 }，
  stateA(){
   return this.$store.state.stateA;
  }，
  stateB(){
   return this.$store.state.stateB;
  }
}

這樣獲取共享狀態(tài)的數(shù)據(jù)也沒有什么問題不過看起來還是有大量的重復(fù)冗余代碼，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性，讓你少按幾次鍵：

當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時，我們也可以給 mapState 傳一個字符串?dāng)?shù)組。

import {mapState} from 'vuex'
 export default {
  name: "index",
  computed:{
   ...mapState(['count']),
  }
 }

小結(jié)：使用 Vuex 并不意味著你需要將所有的狀態(tài)放入 Vuex。雖然將所有的狀態(tài)放到 Vuex 會使?fàn)顟B(tài)變化更顯式和易調(diào)試，但也會使代碼變得冗長和不直觀。如果有些狀態(tài)嚴(yán)格屬于單個組件，最好還是作為組件的局部狀態(tài)。

4.2.getter

有的時候我們需要對共享狀態(tài)里面的某一個屬性做一些處理后再使用，我們可以把數(shù)據(jù)獲取后再在組件的計(jì)算屬性中處理，舉個例子如下：

// store/index.js
state: {
  count:0,
  numbers:[0,1,2,3,4,5,6,7,8]
 },
// Index組件

結(jié)果如下：

那么問題來了，如果多個組件都要做同樣的處理，我們就需要把一份代碼復(fù)制到多個地方，顯然是不大合理的，于是有了getter，可以理解為組件里面的計(jì)算屬性。示例如下：

/ store/index.js
getters: {
  filterNumbers(state){
   return state.numbers.filter((item)=>{
    return item>3;
   })
  }
 },
// Index組件

結(jié)果完全一樣，我們可以根據(jù)this.$store.getters.屬性名來獲取getters，也可以通過 mapGetters 輔助函數(shù)將 store 中的 getter 映射到局部計(jì)算屬性： 

具體實(shí)現(xiàn)方式如下：

如果用同一名字直接把數(shù)組作為參數(shù)，如果想改一個名字，可以傳入一個對象作為參數(shù)，結(jié)果如下：

4.3.mutation

在組件內(nèi)，來自store的數(shù)據(jù)只能讀取，不能手動改變，改變store中數(shù)據(jù)唯一的途徑就是顯示的提交mutations。Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)。改變代碼如下：

// store/index.js
mutations: {
 add(state){
  state.count++;
 }
},

// Index組件
**
  +
**
  methods:{
   add(){
    this.$store.commit('add');
    console.log(this.count);
   }
**

連續(xù)點(diǎn)擊5次增加按鈕，發(fā)現(xiàn)count的值也改變了。當(dāng)然，我們也可以傳參進(jìn)去

// store/index.js
mutations: {
 add(state,n){
  state.count+=n;
 }
},

// Index組件
**
  +
**
  methods:{
   add(){
    this.$store.commit('add'，10);
    console.log(this.count);
   }
**

觸發(fā)方法語句為：this.$store.commit(方法名);也可以使用輔助函數(shù)mapMutations代替：

methods:{
  ...mapMutations(['add']),
}

4.4.action

前面我們講過，mutation有必須同步執(zhí)行這個限制，我們在業(yè)務(wù)需求中有時候需要在獲取ajax請求數(shù)據(jù)之后再操作或定時器操作數(shù)據(jù)，這些都屬于異步請求，要用actions來實(shí)現(xiàn)。具體實(shí)現(xiàn)如下：

// store/index.js
mutations: {
  changeCount(state){
   state.count=3000;
  },
 },
 actions: {
  changeCount3000s(context){
   setTimeout(()=>{
    context.commit('changeCount')
   },3000)

// Index組件
點(diǎn)擊按鈕3s后count的值改變
methods:{
 ...mapMutations(['add']),
  changeCount3000s(){
    this.$store.dispatch('changeCount3000s');
  }
 }

我們在點(diǎn)擊按鈕3s后count的值改變?yōu)?000，我們可以通過this.$store.dispatch(方法名)來觸發(fā)事件，也可以通過輔助函數(shù)mapActions來觸發(fā)。

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
  methods:{
   ...mapMutations(['add']),
   ...mapActions(['changeCount3000s'])
  }

學(xué)會以上幾個屬性的使用基本就可以滿足平時業(yè)務(wù)中的需求了，但使用Vuex會有一定的門檻和復(fù)雜性，它的主要使用場景是大型單頁面應(yīng)用，如果你的項(xiàng)目不是很復(fù)雜，用一個bus也可以實(shí)現(xiàn)數(shù)據(jù)的共享，但是它在數(shù)據(jù)管理，維護(hù)，還只是一個簡單的組件，而Vuex可以更優(yōu)雅高效地完成狀態(tài)管理，所以，是否使用Vuex取決于你的團(tuán)隊(duì)和技術(shù)儲備。

參考資料：

《Vue.js實(shí)踐》  Vuex

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。