vuex管理狀態倉庫使用詳解
一.什麼是Vuex？
Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也整合到 Vue 的官方除錯工具 devtools extension，提供了諸如零配置的 time-travel 除錯、狀態快照匯入匯出等高階除錯功能。採用了全域性單例模式，將元件的共享狀態抽離出來管理，使得元件樹中每一個位置都可以獲取共享的狀態或者觸發行為。
那麼什麼是狀態呢？我把狀態理解為在沒有使用vuex時，在當前元件中data內需要共用的資料為狀態。
vuex使得狀態或行為成為了共享的狀態，所共享的狀態或行為可以在各個元件中都可以訪問到，省去了子父或子子之間傳遞變數，提高了開發效率。
二.不使用vuex時與使用vuex時的差別
當我們不使用vuex時，對於元件之間傳遞資訊會較為麻煩。
不使用vuex時父子之間傳遞資訊：
App.vue檔案中：
<template>
<div id="app">
<Fruits :fruitList="fruitList"/>
</div>
</template>
<script>
import Goods from './components/Goods';
export default {
name: 'App',components:{
Fruits,Goods
},data(){
return{
goodList:[
{
name:'doll',price:12
},{
name:'glass',price:10
}
],}
}
}
</script>
<style>
</style>
Good.vue檔案中：
<template>
<div class="hello">
<ul>
<li v-for="(good,index) in goodList" :key="index">
name:{{good.name}} number: {{good.number}} {{index}}
</li>
</ul>
</div>
</template>
<script>
export default {
props:['goodList'],}
</script>
<style>
</style>
兄弟之間傳遞資訊：
首先先建立一個js檔案作為兩兄弟之間傳輸的鈕釦，這裡起名為msg.js
//建立並暴露vue import Vue from 'vue'; export default new Vue
兄弟元件Goods：
<template>
<div>
<button @click="deliver">點選</button>
</div>
</template>
<script>
import MSG from '../msg';
export default {
data(){
return{
msg:'hahah'
}
},methods:{
deliver() {
MSG.$emit('showMsg',this.msg)
}
}
}
</script>
<style>
</style>
兄弟元件Fruits:
<template>
<div>
<button @click="deliver">點選</button>
</div>
</template>
<script>
import MSG from '../msg';
export default {
data(){
return{
msg:'hahah'
}
},this.msg)
}
}
}
</script>
<style>
</style>
在App元件中的程式碼：
點選按鈕:
上述為兄弟元件之間的傳值，是不是感覺到有點麻煩呢？初學vue元件傳值時，我也覺得這種方法很麻煩，vuex很好的解決了這個問題，愉快的編寫程式碼。
使用vuex共享狀態資料
store.js中的配置：
import Vue from 'vue'; //引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex) //宣告使用Vuex
const state = {
count:1,totalName:'total'
}
const store = new Vuex.Store({
state
})
export default store
App.vue中的配置：
<template>
<div id="app">
<Fruits>
<div>--------------------------</div>
<Goods>
</div>
</template>
<script>
import Fruits from './components/Fruits';
import Goods from './components/Goods';
export default {
name: 'App',Goods
}
}
</script>
<style>
</style>
Good.vue中的配置
<template>
<div>
<div>我是Goods中的元件</div>
<div>我們共同的數字:{{this.count}}</div>
<div>我們共同的名字是 {{this.totalName}} </div>
</div>
</template>
<script>
import {mapState} from 'vuex'; //引入輔助函式
export default {
computed:{
...mapState(['count','totalName']) //物件展開運算子
}
}
</script>
<style>
</style>
Fruits.vue
<template>
<div>
<div>我是Fruits中的元件</div>
<div>我們共同的數字:{{this.count}}</div>
<div>我們共同的名字是 {{this.totalName}} </div>
</div>
</template>
<script>
import {mapState} from 'vuex'; //引入輔助函式
export default {
computed:{
...mapState(['count','totalName']) //物件展開運算子
}
}
</script>
<style>
</style>
上述為使用vuex進行簡單的引用狀態資料值的例子，將資料放到state中進行管理，引入輔助函式和將state中的資料引入元件，在元件中進行呼叫，這種方法是不是比不使用vuex更容易了點呢？但是這才只是個非常淺非常淺的開始。下面進入正文！！！
三.vuex的使用
vuex的安裝
開啟終端，輸入命令列npm install vuex --save進行下載vuex
vuex的核心概念：
- State：共享狀態，相當於元件中data中的資料，只不過此時變成了全域性變數。
- Getter：基於state的派生狀態，相當於元件中的computed中的屬性。
- Mutation：更改vuex中store共享狀態中的方法，通過提交mutation來去修改狀態，進行同步操作資料，通常用於action獲取非同步資料，獲取通過commit提交資料給mutation，在mutation同步操作state中的資料。
- action：支援非同步操作，可用於非同步獲取請求中的資料,並將獲取的資料同步commit提交給mutation，實現ajax非同步請求資料，mutation將其資料同步到state中。
- module：為了方便後期對於專案的管理，對於store中的state，mutation，action，getter進行分子模組化管理。
下面我們的介紹將會在Module規範中進行介紹。
Module子模組化管理
對於子模組管理我們需要建立核心化管理物件store起名為index.js將其他state,getter,mutations,actions。引入到該store模組中，並將其暴露Store物件，下面為程式碼部分。
module結構
vuex應用核心管理倉庫store
下面為store的程式碼，這裡的js我們取名為index.js，通過將state,actions,getters引入到store中，並暴露出store物件。
/*
vuex最核心的管理物件store
*/
import Vue from 'vue';
import Vuex from 'vuex';
import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';
//宣告使用外掛
Vue.use(Vuex)
//new 一個Vuex的物件,將state,mutation,action,getters配置到vuex的store中,方便管理資料
export default new Vuex.Store({
state,getters,})
state狀態管理資料
我們通常將需要進行管理的共享資料，放入state中，使其形似為全域性變數，對於需要的元件進行引入該state狀態資料。下面為state中的程式碼舉例：
/*
狀態物件
*/
export default{
userInfo: {},//使用者資訊
count:1
}
mutation-types
使用常量來代替mutations事件型別是一件很常見的模式，將這些常量放進一個單獨的檔案，可以使你的程式碼合作者對於你的程式碼一目瞭然，增強了程式碼的可閱讀性。下面上程式碼，由於只是例子，所以此時只引入了一個方法。
/* 包含n個mutation的type名稱常量 */ export const RECEIVE_USER_INFO = 'receive_user_info' //接收使用者資訊
actions的非同步操作
actions與其mutations類似，但其可以進行非同步操作，且將非同步操作獲取的資料提交給mutations，使得mutations更改state中的狀態資料,這裡常常用於獲取ajax請求中的資料(因為是非同步)，並將其獲取的資料提交給mutations得到state資料狀態的更新。這裡的傳送ajax傳送請求的程式碼，這裡就不進行演示了，大家能夠了解，此時action中的資料是通過傳送ajax請求來獲取的就行。此時也能體現出actions中可以進行非同步操作。下面上程式碼：
/*
通過mutation間接更新state的多個方法的物件
*/
import {
RECEIVE_USER_INFO,//引入在mutation-types定義的常量
} from './mutation-types';
import {
reqUserInfo,} from '../api'; //這裡引入傳送ajax請求的方法
export default{
// 非同步獲取使用者資訊
async getUserInfo({commit}){
//引入傳送請求資料的方法,非同步等待獲取資料，並將其資料賦值給result
const result = await reqUserInfo()
//當獲取資料成功時，result.code會為0，失敗則為1，這裡用於判斷是否獲取狀態資料成功
if (result.code === 0) {
const userInfo = result.data //獲取請求中的資料
//通過commit將其方法，和請求後獲取的使用者資訊傳遞給mutation
commit(RECEIVE_USER_INFO,{userInfo})
}
}
}
需要注意的是：在元件中應用下列方式來去呼叫vuex元件中的方法:
this.$store.dispatch('getUserInfo')
mutations同步提交資料
mutations用於更改state中的狀態邏輯的，且為同步更改state中的狀態資料。需要知道的是在vuex中只能通過mutation來去修改state物件，可以通過獲取actions獲取到的資料去修改state,也可以在mutations模組中直接定義方法來去更改狀態資料。通過mutations和上面的actions模組大家也可以看出commit是用於mutation模組中的。在元件中呼叫其mutation模組的程式碼為：
this.$store.commit('increment')
下面上mutation模組中的程式碼：
/*
直接更新state的多個方法的物件
*/
import {
RECEIVE_USER_INFO,} from './mutation-types';
export default{
//方法中的第一個預設形參為state,也可以傳入額外的引數，
既mutation的載荷(playload)
[RECEIVE_USER_INFO](state,{userInfo}){
state.userInfo = userInfo
},//不通過actions直接在mutation模組中更改state狀態資料
increment(state){
state.count = 3
}
}
Getters對state進行加工
Getters相當於computed計算屬性，用於加工處理state狀態資料，有其兩個預設引數，第一個預設引數為state，第二個預設引數為getters。
在元件中呼叫該方法的程式碼片段為：
this.$store.getters.totalCount()
下面為Getters中的程式碼片段:
/*
包含多個基於state的getter計算屬性的物件
*/
export default{
plusCount(state){
return state.count + 1
},//獲取state中狀態資料物件，和獲取getters模組中plusCount資料
totalCount(state,getters){
return getters.plusCount + state.count
}
}
那麼對於以上的store我們就簡單介紹完了，相信大家看完後對於vuex會有一定的理解。那麼這個時候我們要想，是不是使用this.$store.state或this.$store.getters.xxx感到麻煩呢？下面我們介紹另一種引入state和getters的方式
輔助函式mapState和mapGetters
對於上述的引用state和getters的方法是不是感到麻煩呢？使用mapState你將會感受到便利。
//首先我們需要先將輔助函式引入
import { mapGetters,mapState } from 'vuex'
export default {
computed: {
// 使用物件展開運算子將 getter 混入 computed 物件中
...mapGetters(['plusCount','totalCount',])
// 使用物件展開運算子將 state 混入 computed 物件中
...mapState(['userInfo','count'])
}
}
到此這篇關於vuex管理狀態倉庫使用詳解的文章就介紹到這了,更多相關vuex管理狀態倉庫內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！