快捷導(dǎo)航

Vuex的初探與實戰(zhàn)小結(jié)

更新時間：2018年11月26日 09:47:06 作者：Peer1029

這篇文章主要介紹了Vuex的初探與實戰(zhàn)小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1.背景

最近在做一個單頁面的管理后臺項目，為了提高開發(fā)效率，使用了Vue框架來開發(fā)。為了使各個部分的功能，獨立結(jié)構(gòu)更加清晰，于是就拆分了很多組件，但是組件與組件之間數(shù)據(jù)共享成了一個問題，父子組件實現(xiàn)起來相對簡單，prop，$emit，$on就能搞定。除此之外，有很多兄弟組件和跨多級組件，實現(xiàn)起來過程繁瑣，在多人協(xié)同開發(fā)上，不利于統(tǒng)一管理，于是，開始了Vue的生態(tài)之一的Vux實踐之旅。

2.概述

每一個 Vuex 應(yīng)用的核心就是 store（倉庫）?！皊tore”基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。

Vuex 和單純的全局對象有以下兩點不同：

1.Vuex 的狀態(tài)存儲是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新；2.你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用

3.安裝使用

3.1.使用Vue-cli開發(fā)安裝vue包

cnpm install vuex --save

3.2.在src目錄下創(chuàng)建store文件夾并創(chuàng)建index.js如下(src/store/index.js)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
 state: {

 },
 getters: {

 },
 mutations: {

 },
 actions: {

 }
});

然后在src文件下的main.js中使用

import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false


new Vue({
 el: '#app',
 store,
 components: { App },
 template: '<App/>'
})

4.用法簡介

4.1.state

state是保存共享數(shù)據(jù)的，現(xiàn)在改store/index.js如下：

state: {
  count:0
 },

在components目錄下創(chuàng)建Index.vue如：

<template>
 <div class="index">
  {{count}}
 </div>
</template>

<script>
 export default {
  name: "index",
  computed:{
   count(){
    return this.$store.state.count;
   }
  }
 }
</script>

結(jié)果如下：

我們可以通過組件的計算屬性來保存state里面的值，那么問題來了，如果store太多的話，我們組件里面的計算屬性豈不是成了這個樣子：

computed:{
 count(){
   return this.$store.state.count;
 }，
  stateA(){
   return this.$store.state.stateA;
  }，
  stateB(){
   return this.$store.state.stateB;
  }
}

這樣獲取共享狀態(tài)的數(shù)據(jù)也沒有什么問題不過看起來還是有大量的重復(fù)冗余代碼，我們可以使用 mapState 輔助函數(shù)幫助我們生成計算屬性，讓你少按幾次鍵：

當(dāng)映射的計算屬性的名稱與 state 的子節(jié)點名稱相同時，我們也可以給 mapState 傳一個字符串?dāng)?shù)組。

import {mapState} from 'vuex'
 export default {
  name: "index",
  computed:{
   ...mapState(['count']),
  }
 }

小結(jié)：使用 Vuex 并不意味著你需要將所有的狀態(tài)放入 Vuex。雖然將所有的狀態(tài)放到 Vuex 會使?fàn)顟B(tài)變化更顯式和易調(diào)試，但也會使代碼變得冗長和不直觀。如果有些狀態(tài)嚴(yán)格屬于單個組件，最好還是作為組件的局部狀態(tài)。

4.2.getter

有的時候我們需要對共享狀態(tài)里面的某一個屬性做一些處理后再使用，我們可以把數(shù)據(jù)獲取后再在組件的計算屬性中處理，舉個例子如下：

// store/index.js
state: {
  count:0,
  numbers:[0,1,2,3,4,5,6,7,8]
 },
// Index組件
<template>
 <div class="index">
  {{count}}
  <br>
  {{numbers.join()}}
 </div>
</template>
<script>
 import {mapState} from 'vuex'
 export default {
  name: "index",
  computed:{
   ...mapState(['count']),
   numbers(){
    return this.$store.state.numbers.filter((item)=>{
     return item>3;
    })
   }
  }
 }
</script>

結(jié)果如下：

那么問題來了，如果多個組件都要做同樣的處理，我們就需要把一份代碼復(fù)制到多個地方，顯然是不大合理的，于是有了getter，可以理解為組件里面的計算屬性。示例如下：

/ store/index.js
getters: {
  filterNumbers(state){
   return state.numbers.filter((item)=>{
    return item>3;
   })
  }
 },
// Index組件
<template>
 <div class="index">
  {{count}}
  <br>
  {{filterNumbers.join()}}
 </div>
</template>

<script>
 import {mapState} from 'vuex'
 export default {
  name: "index",
  computed:{
   ...mapState(['count']),
   filterNumbers(){
    return this.$store.getters.filterNumbers;
   }
  }
 }
</script>

結(jié)果完全一樣，我們可以根據(jù)this.$store.getters.屬性名來獲取getters，也可以通過 mapGetters 輔助函數(shù)將 store 中的 getter 映射到局部計算屬性：

具體實現(xiàn)方式如下：

<template>
 <div class="index">
  {{count}}
  <br>
  {{filterNumbers.join()}}
  <br>
  {{antherNumbers.join()}}
 </div>
</template>

<script>
 import {mapState,mapGetters} from 'vuex'
 export default {
  name: "index",
  computed:{
   ...mapState(['count']),6
   ...mapGetters(['filterNumbers']),
   ...mapGetters({
    antherNumbers:'filterNumbers'
   })
  }
 }
</script>

如果用同一名字直接把數(shù)組作為參數(shù)，如果想改一個名字，可以傳入一個對象作為參數(shù)，結(jié)果如下：

4.3.mutation

在組件內(nèi)，來自store的數(shù)據(jù)只能讀取，不能手動改變，改變store中數(shù)據(jù)唯一的途徑就是顯示的提交mutations。Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的事件類型 (type) 和一個回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)。改變代碼如下：

// store/index.js
mutations: {
 add(state){
  state.count++;
 }
},

// Index組件
**
  <button @click="add">+</button>
**
  methods:{
   add(){
    this.$store.commit('add');
    console.log(this.count);
   }
**

連續(xù)點擊5次增加按鈕，發(fā)現(xiàn)count的值也改變了。當(dāng)然，我們也可以傳參進去

// store/index.js
mutations: {
 add(state,n){
  state.count+=n;
 }
},

// Index組件
**
  <button @click="add">+</button>
**
  methods:{
   add(){
    this.$store.commit('add'，10);
    console.log(this.count);
   }
**

觸發(fā)方法語句為：this.$store.commit(方法名);也可以使用輔助函數(shù)mapMutations代替：

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

4.4.action

前面我們講過，mutation有必須同步執(zhí)行這個限制，我們在業(yè)務(wù)需求中有時候需要在獲取ajax請求數(shù)據(jù)之后再操作或定時器操作數(shù)據(jù)，這些都屬于異步請求，要用actions來實現(xiàn)。具體實現(xiàn)如下：

// store/index.js
mutations: {
  changeCount(state){
   state.count=3000;
  },
 },
 actions: {
  changeCount3000s(context){
   setTimeout(()=>{
    context.commit('changeCount')
   },3000)

// Index組件
<button @click="changeCount3000s">點擊按鈕3s后count的值改變</button>
methods:{
 ...mapMutations(['add']),
  changeCount3000s(){
    this.$store.dispatch('changeCount3000s');
  }
 }

我們在點擊按鈕3s后count的值改變?yōu)?000，我們可以通過this.$store.dispatch(方法名)來觸發(fā)事件，也可以通過輔助函數(shù)mapActions來觸發(fā)。

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
  methods:{
   ...mapMutations(['add']),
   ...mapActions(['changeCount3000s'])
  }

學(xué)會以上幾個屬性的使用基本就可以滿足平時業(yè)務(wù)中的需求了，但使用Vuex會有一定的門檻和復(fù)雜性，它的主要使用場景是大型單頁面應(yīng)用，如果你的項目不是很復(fù)雜，用一個bus也可以實現(xiàn)數(shù)據(jù)的共享，但是它在數(shù)據(jù)管理，維護，還只是一個簡單的組件，而Vuex可以更優(yōu)雅高效地完成狀態(tài)管理，所以，是否使用Vuex取決于你的團隊和技術(shù)儲備。

參考資料：

《Vue.js實踐》 Vuex

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: