1. vuex簡介

vuex是專門用來管理vue.js應(yīng)用程序中狀態(tài)的一個(gè)插件。他的作用是將應(yīng)用中的所有狀態(tài)都放在一起，集中式來管理。需要聲明的是，這里所說的狀態(tài)指的是vue組件中data里面的屬性。了解vue的同學(xué)應(yīng)該是明白data是怎么回事的吧，如果不懂的話，建議先學(xué)完vue的基礎(chǔ)知識(shí)再看vuex。

2. vuex的組成結(jié)構(gòu)示意圖

vuex的特點(diǎn)是把數(shù)據(jù)單獨(dú)隔離，形成一棵樹狀圖。單獨(dú)隔離就意味著它有自己的生態(tài)系統(tǒng)。輸入和輸出，其中action作為數(shù)據(jù)的輸入，state作為數(shù)據(jù)的輸出。如下圖：

vuex里有這么一個(gè)規(guī)則：

只能在mutaions里修改state，actions不能直接修改state

mutations即變化，修改state的數(shù)據(jù)，而且只能是同步的，不能存在異步的操作。如果需要異步怎么辦呢？把異步操作放在actions里，拿到數(shù)據(jù)再通過mutations同步處理。vuex做的其實(shí)是把職權(quán)明確了，責(zé)任細(xì)分了。所以它文檔里也說，小系統(tǒng)可以不用。狀態(tài)數(shù)據(jù)少，沒有細(xì)分的必要。

通過這個(gè)圖，我們很容易就對(duì)vuex的組成部分，以及vuex與組件(components)之間的聯(lián)系一目了然。其實(shí)這張圖，有點(diǎn)迷惑人，暫時(shí)看不懂也沒關(guān)系，只要有一個(gè)直觀的認(rèn)識(shí)就行了。這張描述圖就不用了，大家請往下看。

3. vuex 的核心概念

3.1 store

vuex 中最關(guān)鍵的是store對(duì)象，這是vuex的核心?？梢哉f，vuex這個(gè)插件其實(shí)就是一個(gè)store對(duì)象，每個(gè)vue應(yīng)用僅且僅有一個(gè)store對(duì)象。

3.1.1 創(chuàng)建store

const store = new Vuex.Store({...}); 

可見，store是Vuex.Store這個(gè)構(gòu)造函數(shù)new出來的實(shí)例。在構(gòu)造函數(shù)中可以傳一個(gè)對(duì)象參數(shù)。這個(gè)參數(shù)中可以包含5個(gè)對(duì)象：

• 1.state – 存放狀態(tài)
• 2.getters – state的計(jì)算屬性
• 3.mutations – 更改狀態(tài)的邏輯，同步操作
• 4.actions – 提交mutation，異步操作
• 5.mudules – 將store模塊化

關(guān)于store，需要先記住兩點(diǎn)：

• store 中存儲(chǔ)的狀態(tài)是響應(yīng)式的，當(dāng)組件從store中讀取狀態(tài)時(shí)，如果store中的狀態(tài)發(fā)生了改變，那么相應(yīng)的組件也會(huì)得到更新；
• 不能直接改變store中的狀態(tài)。改變store中的狀態(tài)的唯一途徑是提交(commit)mutations。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化。

3.1.2 一個(gè)完整的store的結(jié)構(gòu)是這樣的

const store = new Vuex.Store({
  state: {
    // 存放狀態(tài)
  },
  getters: {
    // state的計(jì)算屬性
  },
  mutations: {
    // 更改state中狀態(tài)的邏輯，同步操作
  },
  actions: {
    // 提交mutation，異步操作
  },
  // 如果將store分成一個(gè)個(gè)的模塊的話，則需要用到modules。
   //然后在每一個(gè)module中寫state, getters, mutations, actions等。
  modules: {
    a: moduleA,
    b: moduleB,
    // ...
  }
});

3.2 state

state上存放的，說的簡單一些就是變量，也就是所謂的狀態(tài)。沒有使用 state 的時(shí)候，我們都是直接在 data 中進(jìn)行初始化的，但是有了 state 之后，我們就把 data 上的數(shù)據(jù)轉(zhuǎn)移到 state 上去了。另外有些狀態(tài)是組件私有的狀態(tài)，稱為組件的局部狀態(tài)，我們不需要把這部分狀態(tài)放在store中去。

3.2.1 如何在組件中獲取vuex狀態(tài)

由于vuex的狀態(tài)是響應(yīng)式的，所以從store中讀取狀態(tài)的的方法是在組件的計(jì)算屬性中返回某個(gè)狀態(tài)。

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      // 獲取store中的狀態(tài)
      return this.$store.state.count;
    }
  }
}

3.2.2 mapState

當(dāng)一個(gè)組件獲取多種狀態(tài)的時(shí)候，則在計(jì)算屬性中要寫多個(gè)函數(shù)。為了方便，可以使用mapState輔助函數(shù)來幫我們生成計(jì)算屬性。

import { mapState } from  'vuex';
export default {
  // ...
  data (){
    localState: 1
  }
  computed: mapState({
    // 此處的state即為store里面的state
    count: state => state.count,
    // 當(dāng)計(jì)算屬性的名稱與state的狀態(tài)名稱一樣時(shí)，可以省寫
    // 映射 this.count1 為 store.state.count1
    count1,
    //'count'等同于 ‘state => state.count'
    countAlias: 'count',
    countPlus (state){
    // 使用普通函數(shù)是為了保證this指向組件對(duì)象
      return state.count + this.localState;
    }
  })
}
//上面是通過mapState的對(duì)象來賦值的，還可以通過mapState的數(shù)組來賦值
computed: mapState(['count']);
//這種方式很簡潔，但是組件中的state的名稱就跟store中映射過來的同名

對(duì)象擴(kuò)展運(yùn)算符

mapState 函數(shù)返回的是一個(gè)對(duì)象，為了將它里面的計(jì)算屬性與組件本身的局部計(jì)算屬性組合起來，需要用到對(duì)象擴(kuò)展運(yùn)算符。

computed: {
  localState () { 
  ... mapState ({
    })
  }

這樣，mapState中的計(jì)算屬性就與localState計(jì)算屬性混合一起了。

3.3 getters

有時(shí)候我們需要從 store 中的 state 中派生出一些狀態(tài)，例如對(duì)列表進(jìn)行過濾并計(jì)數(shù)。此時(shí)可以用到getters，getters可以看作是store的計(jì)算屬性，其參數(shù)為state。

const store = new Vuex.Store({
  state: {
    todos: [
      {id: 1, text: 'reading', done: true},
      {id: 2, text: 'playBastketball', done: false}
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    }
  }
});

3.3.1 獲取getters里面的狀態(tài)，方法一

//在組件中，則要寫在計(jì)算屬性中，
computed: {
  doneTodos () {
    return this.$store.getters.doneTodos;
  }
}

3.3.2 使用mapGetters獲取getters里面的狀態(tài)：方法二

import {mapState, mapGetters} from 'vuex';
computed: {
...mapState(['increment']),
...mapGetters(['doneTodos'])
}

3.4 mutations

mutations里面是如何更改state中狀態(tài)的邏輯。更改Vuex中的state的唯一方法是，提交mutation，即store.commit(‘increment’)。

3.4.1 提交載荷(payload)

可以向commit傳入額外的參數(shù)，即mutation的載荷。

mutations: {
  increment(state, n){
    state.count += n;
  }
}
store.commit('increment', 10);

payload還可以是一個(gè)對(duì)象。

mutations: {
  increment(state, payload){
  state.count += payload.amount;
}
}
store.commit('increment', {amount: 10});

還可以使用type屬性來提交mutation。

store.commit({
  type: 'increment',
  amount: 10
});
// mutations保持不變
mutations: {
  increment(state, payload){
    state.count += payload.amount;
  }
}

注意：mutation必須是同步函數(shù)，不能是異步的，這是為了調(diào)試的方便。

3.4.2 在組件中提交mutations

那么mutation應(yīng)該在哪里提交呢？ 因?yàn)閖s是基于事件驅(qū)動(dòng)的，所以改變狀態(tài)的邏輯肯定是由事件來驅(qū)動(dòng)的，所以store.commit(‘increment’)是在組件的methods中來執(zhí)行的。

方法1: 在組件的methods中提交

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

方法2: 使用mapMutaions

用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用。

import { mapMutaions } from 'vuex';
export default {
  // ...
  methods: {
    ...mapMutaions([
    'increment' // 映射 this.increment() 為 this.$store.commit('increment')
  ]),
  ...mapMutaions([
      add: 'increment' // 映射 this.add() 為 this.$store.commit('increment')
    ])
    }
}
// 因?yàn)閙utation相當(dāng)于一個(gè)method，所以在組件中，可以這樣來使用
<button @click="increment">+</button>

3.5 actions

因?yàn)閙utations中只能是同步操作，但是在實(shí)際的項(xiàng)目中，會(huì)有異步操作，那么actions就是為了異步操作而設(shè)置的。這樣，就變成了在action中去提交mutation，然后在組件的methods中去提交action。只是提交actions的時(shí)候使用的是dispatch函數(shù)，而mutations則是用commit函數(shù)。

3.5.1 一個(gè)簡單的action

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state){
      state.count++;
    }
  },
  actions: {
    increment(context){
      context.commit('increment');
    }
    /* 可以用參數(shù)結(jié)構(gòu)的方法來寫action
     increment({commit}){
     commit('increment');
     }
     */
  }
});
// action函數(shù)接受一個(gè)context參數(shù)，這個(gè)context具有與store實(shí)例相同的方法和屬性。
// 分發(fā)action
store.dispatch('increment');

action同樣支持payload和對(duì)象方式來分發(fā)，格式跟commit是一樣的，不再贅述。

3.5.2 在組件中分發(fā)action

方法1: 在組件的methods中，使用this.$store.dispatch(‘increment’)。

方法2: 使用mapActions，跟mapMutations是類似的。

import { mapActions } from 'vuex'
export default {
  // ...
  methods: {
    ...mapActions([
    'increment' // 映射 this.increment() 為 this.$store.dispatch('increment')
  ]),
  ...mapActions({
  add: 'increment' // 映射 this.add() 為 this.$store.dispatch('increment')
})
}
}
// 同樣在組件中，可以這樣來使用
<button @click="increment">+</button>

3.5.3 組合actions

因?yàn)閍ction是異步的，那么我們需要知道這個(gè)異步函數(shù)什么時(shí)候結(jié)束，以及等到其執(zhí)行后，會(huì)利用某個(gè)action的結(jié)果。這個(gè)可以使用promise來實(shí)現(xiàn)。在一個(gè)action中返回一個(gè)promise，然后使用then()回調(diào)函數(shù)來處理這個(gè)action返回的結(jié)果。

actions:{
  actionA({commit}){
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation');
        resolve();
      },1000);
    })
  }
}
// 這樣就可以操作actionA返回的結(jié)果了
store.dispatch('actionA').then(() => {
  // dosomething ...
});
// 也可以在另一個(gè)action中使用actionA的結(jié)果
actions: {
  // ...
  actionB({ dispatch, commit }){
    return dispatch('actionA').then(() => {
      commit('someOtherMutation');
    })
  }
}

4 mudules

module是為了將store拆分后的一個(gè)個(gè)小模塊，這么做的目的是因?yàn)楫?dāng)store很大的時(shí)候，分成模塊的話，方便管理。

4.1 每個(gè)module擁有自己的state, getters, mutation, action

const moduleA = {
    state: {...},
    getters: {...},
    mutations: {....},
  actions: {...}
}
const moduleB = {
    state: {...},
    getters: {...},
    mutations: {....},
  actions: {...}
}
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
});
store.state.a // 獲取moduleA的狀態(tài)
store.state.b // 獲取moduleB的狀態(tài)

4.2 模塊內(nèi)部的狀態(tài)

對(duì)于模塊內(nèi)部的mutation和getter，接受的第一個(gè)參數(shù)是模塊的局部狀態(tài)state。順便說一下，根結(jié)點(diǎn)的狀態(tài)為rootState。

const moduleA = {
  state: { count: 0},
  getters: {
    doubleCount(state){
      return state.count * 2;
    }
  },
  mutations: {
    increment(state){
      state.count ++ ;
    }
  },
  actions: {...}
}

4.3 模塊的動(dòng)態(tài)注冊

在模塊創(chuàng)建之后，可以使用store.registerModule方法來注冊模塊。

store.registerModule('myModule', {
  // ...
});

依然的，可以通過store.state.myModule來獲取模塊的狀態(tài)。

可以使用store.unregisterModule(moduleName)來動(dòng)態(tài)的卸載模塊，但是這種方法對(duì)于靜態(tài)模塊是無效的(即在創(chuàng)建store時(shí)聲明的模塊)。

5 含有vuex的項(xiàng)目的結(jié)構(gòu)

5.1 應(yīng)該遵循的規(guī)則

• 應(yīng)用層級(jí)的狀態(tài)都應(yīng)該集中在store中
• 提交 mutation 是更改狀態(tài)state的唯一方式，并且這個(gè)過程是同步的。
• 異步的操作應(yīng)該都放在action里面

到此這篇關(guān)于VUEX如何使用的文章就介紹到這了,更多相關(guān)VUEX內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論