一、state狀態

1.state的含義

是整個應用的倉庫，存儲共用的數據

2.如何訪問以及使用倉庫的數據

一般來說，都有直接訪問和通過輔助函數進行訪問這兩種方式

（1）通過store直接訪問

獲取store對象

適用場景	語法
Vue 組件內部訪問 store 對象	this.$store
普通的 js 模塊中獲取 store 對象	import store from ‘.xxx/store’

使用數據

適用場景	語法
vue模板中	{{ $store.state.xxx}}
Vue組件的js邏輯代碼中	this.$store.state.xxx
普通的 js 模塊中	store.state.xxx

（2）通過輔助函數MapState

輔助函數能幫助我們簡化代碼，使用起來更加方便

//store下的index.js文件
const store = new Vuex.Store({state: {name:"小美“}

//在需要使用的組件內導入mapState
import { mapState } from 'vuex'
//用數組方式引入State,用展開運算符進行映射
export default {computed: mapState(['name']),}

這樣，我們就可以在模板中直接使用 {{ name }} 來獲取并展示 name 的值。

二、mutations

1.作用

用于修改倉庫里面的數據
原因：在vuex中同樣要遵循單項數據流，組件是不能直接修改倉庫中的數據的，所以我們需要在用mutations修改數據

2.嚴格模式

因為vuex不允許組件直接修改倉庫里的數據，為了避免某些錯誤寫法可能導致無效的問題，我們可以通過開啟嚴格模式檢查問題

//store/index.js
const store =new Vuex.Store({strict:true,state:{xxxxxx}
})

3.操作流程

定義 mutations 對象，對象中存放修改 state 的方法

const store = new Vuex.Store({
state: {name:"小美”
},
// 定義mutations對象
mutations: {
// 第一個參數要求是當前store的state屬性
changeName (state) {state.name："小帥“}}
})

組件通過commit調用mutations進行修改

this.$store.commit('changeName')

4.mutations傳參

mutation 對象中定義帶參函數

mutations: {
changeName (state,name) {state.name：name}
}

提交調用 mutation

this.$store.commit('changeName', 小羊)

注意:傳參只能傳state和一個自定義的參數，不支持傳多個參數，但是支持傳state和一個對象/數組

5.輔助函數mapMutations

（1）作用

把mutation中定義的方法提取出來，映射在組件中的methods

（2）操作步驟

store/index文件中定義mutation對象的代碼不變

//在需要使用的組件內導入mapMutations
import { mapMutations } from 'vuex'
//映射在methodss中
methods: {
...mapMutations(['changeName'])
}

就可以直接調用倉庫里的方法，例如，模板里

    <button @click="changeName（‘大灰狼’）">點一下我就改名</button>

而在組件js邏輯代碼塊中用this.changeName(‘大灰狼’)即可調用

三、actions

1.作用

用于處理異步操作
注意：actions處理異步，mutations只能處理同步，actions中的異步操作也是在調用mutations中定義的方法

2.操作流程

下面給出一個一秒后給數組增添一個數的例子:

// store.jsstate () {return {list: []}
},
mutations = {addNumber(state, number) {state.list.push(number);}
}
actions = {async addNumberWithDelay(context,number) {setTimeout(()=>{context.commit('addNumber',number)},1000)	}
}

頁面中用dispatch調用actions的方法：

this.$store.dispatch('addNumberWithDelay', 666)

3.輔助函數mapActions

作用

把在actions中的方法提取出來，映射在組件中的methods方法里

流程

在需要使用的組件里直接導入：

import { mapActions } from 'vuex'
methods: {
...mapActions(['addNumberWithDelay'])
}

在組件js邏輯代碼塊中用this.addNumberWithDelay(666’)即可調用

四、getters

1.作用

基于state里的數據進行一些操作
類似于computed計算屬性

2.操作流程

例如，我們要對state里面定義好的一個數組進行篩選，篩選得到一個全是正數的列表

// store.jsconst state = {numbers: [1, -2, 3, -4, 5]
};const getters = {positiveNumbers: state => {return state.numbers.filter(num => num > 0);}
};

在需要的組件中得到該方法篩選后的數組

 return this.$store.getters.positiveNumbers

3.輔助函數mapGetters

同樣也是提取getters中的方法，映射在computed中

import { mapGetters } from 'vuex'
methods: {
...mapGetters(['positiveNumbers'])
}

在組件js邏輯代碼塊中用this.positiveNumbers即可調用
注意：如果是在模板中調用是{{ positiveNumbers }}，具體語法在上文表格中已經提到過：點我跳轉查看

五、module（分包管理）

1.作用

在 Vuex 中，使用 module 可以把 store 分割成多個小模塊，每個模塊都有自己的 state、mutations、actions、getters 等屬性，從而使得 Vuex 管理較為復雜的應用程序變得更加方便和靈活
因為一個應用會涉及到很多板塊的數據，為了防止store特別膨脹復雜，管理起來更加麻煩，所以我們需要進行拆分，這樣方便后續進行維護、擴展和升級等等……

2.創建module模塊

大致思路是在store文件目錄下新建modules文件夾，再創建不同板塊的js文件。各個板塊的文件中都有屬于自己的state,mutations,actions和gettters.
下面舉一個user的例子：

// store/modules/user.js
const state = {userInfo: {name:‘敲代碼的小樂最快樂’,isLoggedIn: false}
}
const mutations = {}
const actions = {}
const getters = {}
export default {
state,
mutations,
actions,
getters
}

接著再導入注冊user板塊就大功告成：

import user from './modules/user'
const store = new Vuex.Store({
modules: {
user
}
})

3.直接使用模塊中的數據

當使用 Vuex 存儲數據時，即使將數據拆分到不同的模塊中，實際上子模塊的狀態仍然會被掛載在根級別的狀態下，并且屬性名就是模塊名。

（1）方式一：直接通過模塊名訪問

你可以使用 $store.state.模塊名.xxx 的方式直接訪問模塊中的數據。

（2）方式二：mapState

mapState 映射根級別的狀態:mapState(['xxx'])。
映射子模塊的狀態:子模塊需要開啟命名空間namespaced:true，使用mapState('模塊名', ['xxx'])進行訪問。

export default {
namespaced: true,
state,
mutations,
actions,
getters
}

4.使用模塊中getters的數據

（1）方式一：直接通過模塊名訪問

你可以使用$store.getters['模塊名/xxx '] 的方式直接訪問

（2）方式二：mapGetters

mapGetters 映射根級別的狀態:mapGetters([ 'xxx' ])。
映射子模塊的狀態:子模塊需要開啟命名空間，使用mapGetters('模塊名', ['xxx'])進行訪問。

5.調用模塊中的mutation

（1）方式一：直接調用

你可以直接通過 store 調用: $store.commit('模塊名/xxx ', 額外參數)

（2）方式二：mapMutation

mapMutations 映射根級別的狀態:mapMutations([ 'xxx' ])。
映射子模塊的狀態:子模塊需要開啟命名空間，通過mapMutations('模塊名', ['xxx']))調用。

6.調用模塊中的actions

（1）方式一：直接調用

你可以直接通過 store 調用: $store.dispatch('模塊名/xxx ', 額外參數)

（2）方式二：mapAction

mapActions 映射根級別的狀態:mapActions([ 'xxx' ])。
映射子模塊的狀態:子模塊需要開啟命名空間，通過mapActions('模塊名', ['xxx']))調用。

六、總結

vuex的前四大核心概念：state、mutations、getters和actions都有自己的“mapxxx”函數，它都是把其本身的方法提取出來，以映射在組件的方式訪問（state和getters是映射在computed中）或者調用（mutations和actions映射在methods中）。
最后的一個核心概念是modules，它存在的意義在于對跟級別的store進行分包管理。
關系圖：