Vuex 是什么

• Vuex 是實(shí)現(xiàn)組件全局狀態(tài)（數(shù)據(jù)）管理的一種機(jī)制，可以方便的實(shí)現(xiàn)組件之間數(shù)據(jù)的共享。

  
  
  image.png

使用 Vuex 統(tǒng)一管理狀態(tài)的好處

① 能夠在 vuex 中集中管理共享的數(shù)據(jù)，易于開發(fā)和后期維護(hù)
② 能夠高效地實(shí)現(xiàn)組件之間的數(shù)據(jù)共享，提高開發(fā)效率
③ 存儲在 vuex 中的數(shù)據(jù)都是響應(yīng)式的，能夠?qū)崟r保持?jǐn)?shù)據(jù)與頁面的同步

什么樣的數(shù)據(jù)適合存儲到 Vuex 中

一般情況下，只有組件之間共享的數(shù)據(jù)，才有必要存儲到 vuex 中；對于組件中的私有數(shù)據(jù)，依舊存儲在組件
自身的 data 中即可。

Vuex 的基本使用

• 1. 安裝 vuex 依賴包

npm install vuex --save

• 2. 導(dǎo)入 vuex 包

import Vuex from 'vuex'
Vue.use(Vuex)

• 3. 創(chuàng)建 store 對象

const store = new Vuex.Store({
// state 中存放的就是全局共享的數(shù)據(jù)
state: { count: 0 }
})

• 4 將 store 對象掛載到 vue 實(shí)例中

new Vue({
el: '#app',
render: h => h(app),
router,
// 將創(chuàng)建的共享數(shù)據(jù)對象，掛載到 Vue 實(shí)例中
// 所有的組件，就可以直接從 store 中獲取全局的數(shù)據(jù)了
store
})

核心概念概述

Vuex 中的主要核心概念如下：

一、State

state 提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)都要統(tǒng)一放到 Store 的 State 中進(jìn)行存儲。

// 創(chuàng)建store數(shù)據(jù)源，提供唯一公共數(shù)據(jù)
const store = new Vuex.Store({
state: { count: 0 }
})

第一種方式組件訪問 State 中數(shù)據(jù)

this.$store.state.全局?jǐn)?shù)據(jù)名稱

第二種方式組件訪問 State 中數(shù)據(jù)

• 1. 從 vuex 中按需導(dǎo)入 mapState 函數(shù)

import { mapState } from 'vuex'

通過剛才導(dǎo)入的 mapState 函數(shù)，將當(dāng)前組件需要的全局?jǐn)?shù)據(jù)，映射為當(dāng)前組件的 computed 計(jì)算屬性：

• 2. 將全局?jǐn)?shù)據(jù)，映射為當(dāng)前組件的計(jì)算屬性

computed: {
...mapState(['count'])
}

• 3.插值表達(dá)式插入

<h3>當(dāng)前count值為:{{count}}</h3>

二、Mutation

- 第一種方式Mutation 用于變更 Store中 的數(shù)據(jù)。

① 只能通過 mutation 變更 Store 數(shù)據(jù)，不可以直接操作 Store 中的數(shù)據(jù)。
② 通過這種方式雖然操作起來稍微繁瑣一些，但是可以集中監(jiān)控所有數(shù)據(jù)的變化。

image.png

• 2.可以在觸發(fā) mutations 時傳遞參數(shù)：
  
  image.png
  
  commit的作用就是調(diào)用 mutation參數(shù)** this.$store.commit('addN',5)**

第二種方式.觸發(fā) mutations 的

• 1. 從 vuex 中按需導(dǎo)入 mapMutations 函數(shù)

import { mapMutations } from 'vuex'

通過剛才導(dǎo)入的 mapMutations 函數(shù)，將需要的 mutations 函數(shù)，映射為當(dāng)前組件的 methods 方法：

• 2. 將指定的 mutations 函數(shù)，映射為當(dāng)前組件的 methods 函數(shù)

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

• 3.具體代碼

<template>
  <div>
    <h3>當(dāng)前最新的count值為:{{ count }}</h3>
    <button @click="btnHandler1">-1</button>
    <button @click="btnHandler2">-n</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count']) 
  },
  methods: {
    ...mapMutations(['sub','subN']),
    btnHandler1 () {
      this.sub()
    },
     btnHandler2 () {
      this.subN(3)
    }
  }
}
</script>

三、Action

• Action 用于處理異步任務(wù)。
• 如果通過異步操作變更數(shù)據(jù)，必須通過 Action，而不能使用 Mutation，但是在 Action 中還是要通過觸發(fā)
  Mutation 的方式間接變更數(shù)據(jù)。

第一種方式觸發(fā) actions

image.png

觸發(fā) actions 異步任務(wù)時攜帶參數(shù)：

image.png

第二種方式觸發(fā) actions

• 1. 從 vuex 中按需導(dǎo)入 mapActions 函數(shù)

import { mapActions } from 'vuex'

通過剛才導(dǎo)入的 mapActions 函數(shù)，將需要的 actions 函數(shù)，映射為當(dāng)前組件的 methods 方法：

• 2. 將指定的 actions 函數(shù)，映射為當(dāng)前組件的 methods 函數(shù)

methods: {
...mapActions(['addASync', 'subNASync'])
numSub2(){
        this.subAsync()
      },
}

四、 Getter

Getter 用于對 Store 中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)。
① Getter 可以對 Store 中已有的數(shù)據(jù)加工處理之后形成新的數(shù)據(jù)，類似 Vue 的計(jì)算屬性。
② Store 中數(shù)據(jù)發(fā)生變化，Getter 的數(shù)據(jù)也會跟著變化

// 定義 Getter
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
showNum: state => {
return '當(dāng)前最新的數(shù)量是【'+ state.count +'】'
}
}
})

第一種方式使用 getters

this.$store.getters.名稱

第二種方式使用 getters

import { mapGetters } from 'vuex'
computed: {
...mapGetters(['showNum'])
}

https://gitee.com/zhangzanzz007/vuex-demo1
https://gitee.com/zhangzanzz007/vuex-dem02