vuex管理狀態(tài)倉庫使用詳解

更新時(shí)間：2020年07月29日 10:39:22 作者：我的名字豌豆

這篇文章主要介紹了vuex管理狀態(tài)倉庫使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一.什么是Vuex？

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能。采用了全局單例模式，將組件的共享狀態(tài)抽離出來管理，使得組件樹中每一個(gè)位置都可以獲取共享的狀態(tài)或者觸發(fā)行為。

那么什么是狀態(tài)呢？我把狀態(tài)理解為在沒有使用vuex時(shí)，在當(dāng)前組件中data內(nèi)需要共用的數(shù)據(jù)為狀態(tài)。

vuex使得狀態(tài)或行為成為了共享的狀態(tài)，所共享的狀態(tài)或行為可以在各個(gè)組件中都可以訪問到，省去了子父或子子之間傳遞變量，提高了開發(fā)效率。

二.不使用vuex時(shí)與使用vuex時(shí)的差別

當(dāng)我們不使用vuex時(shí)，對(duì)于組件之間傳遞信息會(huì)較為麻煩。

不使用vuex時(shí)父子之間傳遞信息：

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>

兄弟之間傳遞信息：

首先先創(chuàng)建一個(gè)js文件作為兩兄弟之間傳輸?shù)募~扣，這里起名為msg.js

//創(chuàng)建并暴露vue
import Vue from 'vue';
export default new Vue

兄弟組件Goods：

<template>
 <div>
    <button @click="deliver">點(diǎn)擊</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">點(diǎn)擊</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組件中的代碼：

點(diǎn)擊按鈕:

上述為兄弟組件之間的傳值，是不是感覺到有點(diǎn)麻煩呢？初學(xué)vue組件傳值時(shí)，我也覺得這種方法很麻煩，vuex很好的解決了這個(gè)問題，愉快的編寫代碼。

使用vuex共享狀態(tài)數(shù)據(jù)

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',
 components:{
  Fruits,
  Goods
 }
}
</script> 

<style>

</style>

Good.vue中的配置

<template>
 <div>
  <div>我是Goods中的組件</div>
   <div>我們共同的數(shù)字:{{this.count}}</div>
  <div>我們共同的名字是 {{this.totalName}} </div>
 </div>
</template>
<script>
import {mapState} from 'vuex'; //引入輔助函數(shù)
export default {
  computed:{
   ...mapState(['count','totalName']) //對(duì)象展開運(yùn)算符
  } 
}
</script>
<style>

</style>

Fruits.vue

<template>
 <div>
  <div>我是Fruits中的組件</div>
  <div>我們共同的數(shù)字:{{this.count}}</div>
  <div>我們共同的名字是 {{this.totalName}} </div>
 </div>
</template>

<script>
import {mapState} from 'vuex';  //引入輔助函數(shù)
export default {
  computed:{
    ...mapState(['count','totalName'])  //對(duì)象展開運(yùn)算符
  }
}
</script>

<style>

</style>

上述為使用vuex進(jìn)行簡單的引用狀態(tài)數(shù)據(jù)值的例子，將數(shù)據(jù)放到state中進(jìn)行管理，引入輔助函數(shù)和將state中的數(shù)據(jù)引入組件，在組件中進(jìn)行調(diào)用，這種方法是不是比不使用vuex更容易了點(diǎn)呢？但是這才只是個(gè)非常淺非常淺的開始。下面進(jìn)入正文?。?！

三.vuex的使用

vuex的安裝

打開終端，輸入命令行npm install vuex --save進(jìn)行下載vuex

vuex的核心概念：

State：共享狀態(tài)，相當(dāng)于組件中data中的數(shù)據(jù)，只不過此時(shí)變成了全局變量。
Getter：基于state的派生狀態(tài)，相當(dāng)于組件中的computed中的屬性。
Mutation：更改vuex中store共享狀態(tài)中的方法，通過提交mutation來去修改狀態(tài)，進(jìn)行同步操作數(shù)據(jù)，通常用于action獲取異步數(shù)據(jù)，獲取通過commit提交數(shù)據(jù)給mutation，在mutation同步操作state中的數(shù)據(jù)。
action：支持異步操作，可用于異步獲取請(qǐng)求中的數(shù)據(jù),并將獲取的數(shù)據(jù)同步commit提交給mutation，實(shí)現(xiàn)ajax異步請(qǐng)求數(shù)據(jù)，mutation將其數(shù)據(jù)同步到state中。
module：為了方便后期對(duì)于項(xiàng)目的管理，對(duì)于store中的state，mutation，action，getter進(jìn)行分子模塊化管理。

下面我們的介紹將會(huì)在Module規(guī)范中進(jìn)行介紹。

Module子模塊化管理

對(duì)于子模塊管理我們需要?jiǎng)?chuàng)建核心化管理對(duì)象store起名為index.js將其他state,getter,mutations,actions。引入到該store模塊中，并將其暴露Store對(duì)象，下面為代碼部分。

module結(jié)構(gòu)

vuex應(yīng)用核心管理倉庫store

下面為store的代碼，這里的js我們?nèi)∶麨閕ndex.js，通過將state,mutations,actions,getters引入到store中，并暴露出store對(duì)象。

/*
  vuex最核心的管理對(duì)象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 一個(gè)Vuex的對(duì)象,將state,mutation,action,getters配置到vuex的store中,方便管理數(shù)據(jù)
export default new Vuex.Store({  
  state,
  mutations,
  actions,
  getters,
})

state狀態(tài)管理數(shù)據(jù)

我們通常將需要進(jìn)行管理的共享數(shù)據(jù)，放入state中，使其形似為全局變量，對(duì)于需要的組件進(jìn)行引入該state狀態(tài)數(shù)據(jù)。下面為state中的代碼舉例：

/* 
  狀態(tài)對(duì)象
*/
export default{
  userInfo: {}, //用戶信息
  count:1
}

mutation-types

使用常量來代替mutations事件類型是一件很常見的模式，將這些常量放進(jìn)一個(gè)單獨(dú)的文件，可以使你的代碼合作者對(duì)于你的代碼一目了然，增強(qiáng)了代碼的可閱讀性。下面上代碼，由于只是例子，所以此時(shí)只引入了一個(gè)方法。

/* 
  包含n個(gè)mutation的type名稱常量
*/
export const RECEIVE_USER_INFO = 'receive_user_info'  //接收用戶信息

actions的異步操作

actions與其mutations類似，但其可以進(jìn)行異步操作，且將異步操作獲取的數(shù)據(jù)提交給mutations，使得mutations更改state中的狀態(tài)數(shù)據(jù),這里常常用于獲取ajax請(qǐng)求中的數(shù)據(jù)(因?yàn)槭钱惒?，并將其獲取的數(shù)據(jù)提交給mutations得到state數(shù)據(jù)狀態(tài)的更新。這里的發(fā)送ajax發(fā)送請(qǐng)求的代碼，這里就不進(jìn)行演示了，大家能夠了解，此時(shí)action中的數(shù)據(jù)是通過發(fā)送ajax請(qǐng)求來獲取的就行。此時(shí)也能體現(xiàn)出actions中可以進(jìn)行異步操作。下面上代碼：

/* 
  通過mutation間接更新state的多個(gè)方法的對(duì)象
*/
import {
  RECEIVE_USER_INFO,   //引入在mutation-types定義的常量
} from './mutation-types';

import {
  reqUserInfo,
} from '../api';   //這里引入發(fā)送ajax請(qǐng)求的方法

export default{
  // 異步獲取用戶信息
  async getUserInfo({commit}){
  //引入發(fā)送請(qǐng)求數(shù)據(jù)的方法,異步等待獲取數(shù)據(jù)，并將其數(shù)據(jù)賦值給result
    const result = await reqUserInfo() 
    //當(dāng)獲取數(shù)據(jù)成功時(shí)，result.code會(huì)為0，失敗則為1，這里用于判斷是否獲取狀態(tài)數(shù)據(jù)成功
    if (result.code === 0) { 
      const userInfo = result.data //獲取請(qǐng)求中的數(shù)據(jù)
      //通過commit將其方法，和請(qǐng)求后獲取的用戶信息傳遞給mutation
      commit(RECEIVE_USER_INFO,{userInfo}) 
    }
  }
}

需要注意的是：在組件中應(yīng)用下列方式來去調(diào)用vuex組件中的方法:

this.$store.dispatch('getUserInfo')

mutations同步提交數(shù)據(jù)

mutations用于更改state中的狀態(tài)邏輯的，且為同步更改state中的狀態(tài)數(shù)據(jù)。需要知道的是在vuex中只能通過mutation來去修改state對(duì)象，可以通過獲取actions獲取到的數(shù)據(jù)去修改state,也可以在mutations模塊中直接定義方法來去更改狀態(tài)數(shù)據(jù)。通過mutations和上面的actions模塊大家也可以看出commit是用于mutation模塊中的。在組件中調(diào)用其mutation模塊的代碼為：

this.$store.commit('increment')

下面上mutation模塊中的代碼：

/* 
  直接更新state的多個(gè)方法的對(duì)象
*/

import {
  RECEIVE_USER_INFO,
} from './mutation-types';

export default{
//方法中的第一個(gè)默認(rèn)形參為state,也可以傳入額外的參數(shù)，
既mutation的載荷(playload)
  [RECEIVE_USER_INFO](state,{userInfo}){
    state.userInfo = userInfo
  },
  //不通過actions直接在mutation模塊中更改state狀態(tài)數(shù)據(jù)
  increment(state){
    state.count = 3
  }
}

Getters對(duì)state進(jìn)行加工

Getters相當(dāng)于computed計(jì)算屬性，用于加工處理state狀態(tài)數(shù)據(jù)，有其兩個(gè)默認(rèn)參數(shù)，第一個(gè)默認(rèn)參數(shù)為state，第二個(gè)默認(rèn)參數(shù)為getters。
在組件中調(diào)用該方法的代碼片段為：

this.$store.getters.totalCount()

下面為Getters中的代碼片段:

/* 
  包含多個(gè)基于state的getter計(jì)算屬性的對(duì)象 
*/
export default{

  plusCount(state){
    return state.count + 1
  },
 //獲取state中狀態(tài)數(shù)據(jù)對(duì)象，和獲取getters模塊中plusCount數(shù)據(jù)
  totalCount(state,getters){
    return getters.plusCount + state.count
  }
  
}

那么對(duì)于以上的store我們就簡單介紹完了，相信大家看完后對(duì)于vuex會(huì)有一定的理解。那么這個(gè)時(shí)候我們要想，是不是使用this.$store.state或this.$store.getters.xxx感到麻煩呢？下面我們介紹另一種引入state和getters的方式

輔助函數(shù)mapState和mapGetters

對(duì)于上述的引用state和getters的方法是不是感到麻煩呢？使用mapState你將會(huì)感受到便利。

//首先我們需要先將輔助函數(shù)引入
import { mapGetters,mapState } from 'vuex'

export default {
 computed: {
 // 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中
  ...mapGetters(['plusCount','totalCount',])
 // 使用對(duì)象展開運(yùn)算符將 state 混入 computed 對(duì)象中
 	...mapState(['userInfo','count'])
 }
}

到此這篇關(guān)于vuex管理狀態(tài)倉庫使用詳解的文章就介紹到這了,更多相關(guān)vuex管理狀態(tài)倉庫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: