這篇文章主要為大家展示了怎么使用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'
}
},
methods:{
deliver() {
MSG.$emit('showMsg',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 storeApp.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',
components:{
Fruits,
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的核心概念：
下面我們的介紹將會在Module規范中進行介紹。
Module子模塊化管理
對于子模塊管理我們需要創建核心化管理對象store起名為index.js將其他state,getter,mutations,actions。引入到該store模塊中，并將其暴露Store對象，下面為代碼部分。
module結構
vuex應用核心管理倉庫store
下面為store的代碼，這里的js我們取名為index.js，通過將state,mutations,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,
mutations,
actions,
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管理狀態倉庫的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
