第一章 初識vuex

vuex有什么用?

比如, vue做了一個音樂app, 里面的播放組件, 這組件應(yīng)該是在所有的頁面都有用到的.
希望在所有的頁面都能控制播放器的 暫停/播放, 或者說都可以選擇是否 隨便播放/單曲循環(huán).
這就涉及到了多組件之間的傳參,而且是非常復(fù)雜的傳參.這時候使用vuex是合適的.

vuex是什么?

通過簡單的描述, 我們大概可以理解為vuex是一個公共 狀態(tài)庫 , 你可以在所有的組件里面去使用,修改

那這個狀態(tài)庫是由什么組成的?

一. state: 最最基本的狀態(tài)

const store = new Vuex.Store({ state: { count: 0 } ... })

二. getters: 相當(dāng)于計(jì)算屬性

當(dāng)我們得到state的值之后, 使用getters, 將這些基本的值進(jìn)行組合加工, 得到我們需要的值

三. mutations:

他的作用就是來改變state的值, 并且是唯一的方法

四. actions:

假如你有好幾個mutation需要提交, 一個一個的寫就太傻逼了. 可以用 actions 來封裝 mutations.

第二章 vuex核心概念詳解

1. state的運(yùn)用

a. 最簡單的方法就是在計(jì)算屬性中返回state狀態(tài)

state

b. 我們用vue-cli來制作webapp的時候

webapp

c. 若一個組件需要很多的state狀態(tài)的話, 上面方式就不夠簡潔了. 使用 mapState 輔助函數(shù)

mapState

2. getters的運(yùn)用

a. 基本使用

b. mapGetters 輔助函數(shù) 簡化應(yīng)用

3. mutations的運(yùn)用

a. mutations 下面是一個簡單的例子

b. 給mutations 提交額外的參數(shù)

c. 使用常量替代 Mutation 事件類型

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

d. 在組件中提交 Mutations

// 方法1
this.$store.commit('xxx')

4. actions的運(yùn)用

a. 前面我們已經(jīng)說過了,actions主要是來同時提交多個mutations

b. 進(jìn)行異步操作 多看看 這例子寫的很好

c. 在組件中分發(fā) Action