vuex是一個(gè)專(zhuān)門(mén)為vue.js設(shè)計(jì)的狀態(tài)管理模式，并且也可以使用devtools進(jìn)行調(diào)試。

在vuex出現(xiàn)之前，vue里面的狀態(tài)是屬于‘單向數(shù)據(jù)流'。舉個(gè)官網(wǎng)的例子:

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `<div>{{ count }} </div`,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

其中

1. state是一個(gè)數(shù)據(jù)源
2. view以聲明的方式將state映射到視圖
3. actions 響應(yīng)在view上的用戶(hù)輸入導(dǎo)致的狀態(tài)變化

但是解決不了 多個(gè)組件共享狀態(tài)

所以vuex應(yīng)運(yùn)而生

簡(jiǎn)單來(lái)說(shuō)，就是共享的狀態(tài)用state來(lái)存放，用mutations來(lái)操作state，但是需要用store.commit來(lái)主動(dòng)式的操作mutations。

下面來(lái)單獨(dú)介紹 state，getters，mutations，actions，modules

State

單一狀態(tài)樹(shù)

vuex使用單一狀態(tài)樹(shù)，那么就可以用一個(gè)對(duì)象來(lái)包含全部的應(yīng)用層級(jí)狀態(tài)。所以state就作為數(shù)據(jù)源。

如何在組件中獲得vuex狀態(tài)？

由于vuex的狀態(tài)存儲(chǔ)是響應(yīng)式的，所以從store實(shí)例中讀取狀態(tài)的最簡(jiǎn)單方法就是使用計(jì)算屬性來(lái)返回某個(gè)狀態(tài)：

這個(gè)是store/state.js中聲明的數(shù)據(jù)源

這個(gè)是在組件中進(jìn)行的引用

不過(guò)需要注意的是，在組件中進(jìn)行引用之前，需要先在入門(mén)文件中進(jìn)行注入
即：

如果不在根實(shí)例中注冊(cè)store選項(xiàng)的話(huà)，那么需要在每一個(gè)使用state的組件中都要導(dǎo)入。

注冊(cè)之后，子組件只需要this.$store即可調(diào)用vuex。

Getters

有時(shí)候我們需要從state中派生出一些狀態(tài)，比如篩選一組列表，并且這個(gè)篩選后的數(shù)據(jù)是有其他組件要用的。那么我們就需要把這個(gè)結(jié)果進(jìn)行包裝，形成共享狀態(tài)。

例如：

computed:{
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

如果說(shuō)這個(gè)length是其他組件用的話(huà)，那么如何做呢？

Getter就這樣應(yīng)運(yùn)而生了。

getters: {
  doneTodosCount: state => {
    return state.todos.filter(todo => todo.done).length
  }
}

Getter 會(huì)暴露為store.getters對(duì)象

所以很容易在任何組件中使用它：

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

這是getters.js

這是組件中的引用

Mutations

更改Vuex的store中的狀態(tài)的唯一方法就是提交mutations。

Vuex中的mutations就像一個(gè)事件：每個(gè)mutations都有一個(gè)字符串的事件類(lèi)型（type）和一個(gè)回調(diào)函數(shù)（handler）。這個(gè)回調(diào)函數(shù)接受state作為第一個(gè)參數(shù)。

但是我們又不能直接來(lái)調(diào)用一個(gè)mutations的handler。要喚醒一個(gè)mutations handler，需要以相應(yīng)的type來(lái)調(diào)用store.commit方法。

這個(gè)是在mutations.js中注冊(cè)的一些的事件

這是在組件中來(lái)觸發(fā)這個(gè)事件

當(dāng)然，我們注意到，mutations中可以傳遞額外的參數(shù)，這個(gè)參數(shù)就叫做mutations的載荷。
在更多的情況下，載荷應(yīng)該是一個(gè)對(duì)象。這樣可以包含更多的字段。

但是mutations必須是同步函數(shù)。

那我們?nèi)绾蝸?lái)異步的更新State呢？

答案是： Actions

Actions

Actions類(lèi)似于 mutations 不同的是：

1. Actions 提交的是mutations，而不是直接變更狀態(tài)。
2. Actions 可以包含任意異步操作。

這也就形成了 actions —— mutations —— state 的過(guò)程

Actions函數(shù)接受一個(gè)與store實(shí)例具有相同方法和屬性的context對(duì)象，因此可以通過(guò)context.commit來(lái)提交一個(gè)mutations。但是如何觸發(fā)呢？

答案： store.dispatch

Modules

使用單一狀態(tài)樹(shù)，導(dǎo)致應(yīng)用的所有狀態(tài)都集中到了一個(gè)很大的對(duì)象。所以，store對(duì)象容易變得臃腫。

為了解決這個(gè)問(wèn)題， Vuex允許咱們把store進(jìn)行一個(gè)功能拆分，分割成不同的模塊（module）。每個(gè)模塊都擁有自己的store，mutations，action，getters。

項(xiàng)目結(jié)構(gòu)

├── index.html
├── main.js
├── api
│  └── ... # 抽取出API請(qǐng)求
├── components
│  ├── App.vue
│  └── ...
└── store
  ├── index.js     # 我們組裝模塊并導(dǎo)出 store 的地方
  ├── actions.js    # 根級(jí)別的 action
  ├── mutations.js   # 根級(jí)別的 mutation
  └── modules
    ├── cart.js    # 購(gòu)物車(chē)模塊
    └── products.js  # 產(chǎn)品模塊

總結(jié)：

vuex可以用在單頁(yè)面上的組件間共享狀態(tài)。不適合用于跨頁(yè)面的通信。

另外，對(duì)于一些跨頁(yè)面的數(shù)據(jù)或者關(guān)鍵性的數(shù)據(jù)，可以通過(guò)localStorage，sessionStorage

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論