一.如果你的項(xiàng)目中，需要用到在各個(gè)子組件中共享數(shù)據(jù)，則你就需要用到Vue.x

state:{},狀態(tài)，把需要在多個(gè)組件之間共享的數(shù)據(jù)，可以理解為Vue實(shí)列中的data
mutations：{}要修改state中的數(shù)據(jù)，你只能通過(guò)mutation中的方法

使用：一旦你在vue實(shí)列中注入了store,則在所有的子組件及vue實(shí)列中，你都可以通過(guò) this.$store.state.數(shù)據(jù)名,去修改數(shù)據(jù)，但是vuex反對(duì)這么做，因?yàn)檫@種方式修改數(shù)據(jù)，不會(huì)再vuex調(diào)試面板留下記錄。

image.png

Mutations你可以理解它的每個(gè)屬性名：表示一個(gè)事件名。它的每個(gè)屬性值:表示當(dāng)這個(gè)事件發(fā)生之后要調(diào)用的函數(shù)。

image.png

調(diào)用mutations

格式：this.$store.commit(“mutations中的屬性名”)

注意思想：在組件內(nèi)部去提交(commit) mutations

image.png

二：Vuex的四個(gè)概念

Getters:從state中的數(shù)據(jù)，取出一部分來(lái)，依據(jù)數(shù)據(jù)項(xiàng)產(chǎn)生新的結(jié)果，類(lèi)似于Vue實(shí)列中的computed（計(jì)算屬性）
Actions:在對(duì)數(shù)據(jù)實(shí)現(xiàn)異步操作時(shí)，要用的

拿數(shù)據(jù)：
方法一 :this.$store.state.amount

image.png

方法二：用計(jì)算屬性computed來(lái)獲取數(shù)據(jù)

image.png

方法三：直接用mapState來(lái)獲取數(shù)據(jù)

image.png

image.png

Getters

有時(shí)候希望在state中數(shù)據(jù)基礎(chǔ)上，派生出一些其他的數(shù)據(jù)，例如：我們想知道有多少人的分?jǐn)?shù)小于60分。這里就要用到getters

1.在vuex中定義getters

image.png

2.拿數(shù)據(jù)

image.png

這種寫(xiě)法太長(zhǎng)了，不好看。所以用mapGetters，簡(jiǎn)化代碼

image.png

Mutations:修改數(shù)據(jù)

1.比如說(shuō)我們要向list里邊加一條數(shù)據(jù)

在組件中使用

image.png

image.png

image.png

image.png

Actions

在mutations中，操作是異步的。

image.png

image.png

1.操作actions：

image.png

2.在組件中使用actions

image.png

3.簡(jiǎn)寫(xiě)

image.png