如何使用Vuex

小編給大家分享一下如何使用Vuex，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

什么是Vuex？

vuex是一個(gè)專門為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。狀態(tài)？我把它理解為在data中的屬性需要共享給其他vue組件使用的部分，就叫做狀態(tài)。簡單的說就是data中需要共用的屬性。

引入Vuex（前提是已經(jīng)用Vue腳手架工具構(gòu)建好項(xiàng)目）

1、利用npm包管理工具，進(jìn)行安裝 vuex。在控制命令行中輸入下邊的命令就可以了。

 npm install vuex --save

要注意的是這里一定要加上 –save，因?yàn)槟氵@個(gè)包我們在生產(chǎn)環(huán)境中是要使用的。

2、新建一個(gè)store文件夾（這個(gè)不是必須的），并在文件夾下新建store.js文件，文件中引入我們的vue和vuex。 

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

3、使用我們vuex，引入之后用Vue.use進(jìn)行引用。

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

通過這三步的操作，vuex就算引用成功了，接下來我們就可以盡情的玩耍了。

4、在main.js 中引入新建的vuex文件

 import storeConfig from './vuex/store'

5、再然后 , 在實(shí)例化 Vue對象時(shí)加入 store 對象 :

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

初出茅廬 來個(gè)Demo

1、現(xiàn)在我們store.js文件里增加一個(gè)常量對象。store.js文件就是我們在引入vuex時(shí)的那個(gè)文件。

 const state = {
  count:1
 }

2、用export default 封裝代碼，讓外部可以引用。

 export default new Vuex.Store({
  state
 });

3、新建一個(gè)vue的模板，位置在components文件夾下，名字叫count.vue。在模板中我們引入我們剛建的store.js文件，并在模板中用{{$store.state.count}}輸出count 的值。

 <template>
  <div>
   <h3>{{msg}}</h3>
   <hr/>
   <h4>{{$store.state.count}}</h4>
  </div>
 </template>
 <script>
  import store from '@/vuex/store'
  export default{
   data(){
    return{
     msg:'Hello Vuex',

    }
   },
   store
  }
 </script>

4、在store.js文件中加入兩個(gè)改變state的方法。

const mutations={
  add(state){
   state.count+=1;
  },
  reduce(state){
   state.count-=1;
  }
 }

這里的mutations是固定的寫法，意思是改變的，所以你先不用著急，只知道我們要改變state的數(shù)值的方法，必須寫在mutations里就可以了。

5、在count.vue模板中加入兩個(gè)按鈕，并調(diào)用mutations中的方法。

 <div>
  <button @click="$store.commit('add')">+</button>
  <button @click="$store.commit('reduce')">-</button>
 </div>

這樣進(jìn)行預(yù)覽就可以實(shí)現(xiàn)對vuex中的count進(jìn)行加減了。

state訪問狀態(tài)對象

const state ，這個(gè)就是我們說的訪問狀態(tài)對象，它就是我們SPA（單頁應(yīng)用程序）中的共享值。

學(xué)習(xí)狀態(tài)對象賦值給內(nèi)部對象，也就是把stroe.js中的值，賦值給我們模板里data中的值。有三種賦值方式

一、 通過computed的計(jì)算屬性直接賦值

computed屬性可以在輸出前，對data中的值進(jìn)行改變，我們就利用這種特性把store.js中的state值賦值給我們模板中的data值。

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

這里需要注意的是return this.$store.state.count這一句，一定要寫this，要不你會找不到$store的。這種寫法很好理解，但是寫起來是比較麻煩的，那我們來看看第二種寫法。

二、通過mapState的對象來賦值

我們首先要用import引入mapState。  

import {mapState} from 'vuex';

然后還在computed計(jì)算屬性里寫如下代碼：

 computed:mapState({
   count:state=>state.count //理解為傳入state對象，修改state.count屬性
  })

這里我們使用ES6的箭頭函數(shù)來給count賦值。

三、通過mapState的數(shù)組來賦值

 computed:mapState(["count"])

這個(gè)算是最簡單的寫法了，在實(shí)際項(xiàng)目開發(fā)當(dāng)中也經(jīng)常這樣使用。

Mutations修改狀態(tài)（$store.commit( )）

Vuex提供了commit方法來修改狀態(tài)，我們粘貼出Demo示例代碼內(nèi)容，簡單回顧一下，我們在button上的修改方法。

 <button @click="$store.commit('add')">+</button>
 <button @click="$store.commit('reduce')">-</button>

store.js文件：

 const mutations={
  add(state){
   state.count+=1;
  },
  reduce(state){
   state.count-=1;
  }
 }

傳值：這只是一個(gè)最簡單的修改狀態(tài)的操作，在實(shí)際項(xiàng)目中我們常常需要在修改狀態(tài)時(shí)傳值。比如上邊的例子，是我們每次只加1，而現(xiàn)在我們要通過所傳的值進(jìn)行相加。其實(shí)我們只需要在Mutations里再加上一個(gè)參數(shù)，并在commit的時(shí)候傳遞就就可以了。我們來看具體代碼：

現(xiàn)在store.js文件里給add方法加上一個(gè)參數(shù)n。

 const mutations={
  add(state,n){
   state.count+=n;
  },
  reduce(state){
   state.count-=1;
  }
 }

在Count.vue里修改按鈕的commit( )方法傳遞的參數(shù)，我們傳遞10，意思就是每次加10.

 <p>
  <button @click="$store.commit('add',10)">+</button>
  <button @click="$store.commit('reduce')">-</button>
 </p>

模板獲取Mutations方法

實(shí)際開發(fā)中我們也不喜歡看到$store.commit( )這樣的方法出現(xiàn)，我們希望跟調(diào)用模板里的方法一樣調(diào)用。
 例如：@click=”reduce” 就和沒引用vuex插件一樣。要達(dá)到這種寫法，只需要簡單的兩部就可以了：

1、在模板count.vue里用import 引入我們的mapMutations：   

 import { mapState,mapMutations } from 'vuex';

2、在模板的<\script>標(biāo)簽里添加methods屬性，并加入mapMutations

 methods:mapMutations([
   'add','reduce'
 ]),

通過上邊兩部，我們已經(jīng)可以在模板中直接使用我們的reduce或者add方法了，就像下面這樣。

 <button @click="reduce">-</button>

getters計(jì)算過濾操作

getters從表面是獲得的意思，可以把他看作在獲取數(shù)據(jù)之前進(jìn)行的一種再編輯,相當(dāng)于對數(shù)據(jù)的一個(gè)過濾和加工。你可以把它看作store.js的計(jì)算屬性。

getters基本用法：

比如我們現(xiàn)在要對store.js文件中的count進(jìn)行一個(gè)計(jì)算屬性的操作，就是在它輸出前，給它加上100.我們首先要在store.js里用const聲明我們的getters屬性。

 const getters = {
  count:function(state){
   return state.count +=100;
  }
 }

寫好了gettters之后，我們還需要在Vuex.Store()里引入，由于之前我們已經(jīng)引入了state和mutations，所以引入里有三個(gè)引入屬性。代碼如下，

 export default new Vuex.Store({
  state,mutations,getters
 })

在store.js里的配置算是完成了，我們需要到模板頁對computed進(jìn)行配置。在vue 的構(gòu)造器里邊只能有一個(gè)computed屬性，如果你寫多個(gè)，只有最后一個(gè)computed屬性可用，所以要對上節(jié)課寫的computed屬性進(jìn)行一個(gè)改造。改造時(shí)我們使用ES6中的展開運(yùn)算符”…”。

 computed:{
  ...mapState(["count"]),
  count(){
   return this.$store.getters.count;
  }
 },

需要注意的是，你寫了這個(gè)配置后，在每次count 的值發(fā)生變化的時(shí)候，都會進(jìn)行加100的操作。

用mapGetters簡化模板寫法

我們都知道state和mutations都有map的引用方法把我們模板中的編碼進(jìn)行簡化，我們的getters也是有的，我們來看一下代碼。

首先用import引入我們的mapGetters

 import { mapState,mapMutations,mapGetters } from 'vuex';

在computed屬性中加入mapGetters

 ...mapGetters(["count"])

actions異步修改狀態(tài)

actions和之前講的Mutations功能基本一樣，不同點(diǎn)是，actions是異步的改變state狀態(tài)，而Mutations是同步改變狀態(tài)。至于什么是異步什么是同步這里我就不做太多解釋了，如果你不懂自己去百度查一下吧。

在store.js中聲明actions

actions是可以調(diào)用Mutations里的方法的，我們還是繼續(xù)在上節(jié)課的代碼基礎(chǔ)上進(jìn)行學(xué)習(xí)，在actions里調(diào)用add和reduce兩個(gè)方法。

 const actions ={
  addAction(context){
   context.commit('add',10)
  },
  reduceAction({commit}){
   commit('reduce')
  }
 }

在actions里寫了兩個(gè)方法addAction和reduceAction，在方法體里，我們都用commit調(diào)用了Mutations里邊的方法。細(xì)心的小伙伴會發(fā)現(xiàn)這兩個(gè)方法傳遞的參數(shù)也不一樣。

?ontext：上下文對象，這里你可以理解稱store本身。
?{commit}：直接把commit對象傳遞過來，可以讓方法體邏輯和代碼更清晰明了。

模板中的使用

我們需要在count.vue模板中編寫代碼，讓actions生效。我們先復(fù)制兩個(gè)以前有的按鈕，并改成我們的actions里的方法名，分別是：addAction和reduceAction。

  <p>
   <button @click="addAction">+</button>
   <button @click="reduceAction">-</button>
  </p>

改造一下我們的methods方法，首先還是用擴(kuò)展運(yùn)算符把mapMutations和mapActions加入。

  methods:{
    ...mapMutations([ 
      'add','reduce'
    ]),
    ...mapActions(['addAction','reduceAction'])
  },

你還要記得用import把我們的mapActions引入才可以使用。

增加異步檢驗(yàn)

我們現(xiàn)在看的效果和我們用Mutations作的一模一樣，肯定有的小伙伴會好奇，那actions有什么用，我們?yōu)榱搜菔綼ctions的異步功能，我們增加一個(gè)計(jì)時(shí)器（setTimeOut）延遲執(zhí)行。在addAction里使用setTimeOut進(jìn)行延遲執(zhí)行。

  setTimeOut(()=>{context.commit(reduce)},3000);
  console.log('我比reduce提前執(zhí)行');

我們可以看到在控制臺先打印出了‘我比reduce提前執(zhí)行'這句話。

module模塊組

隨著項(xiàng)目的復(fù)雜性增加，我們共享的狀態(tài)越來越多，這時(shí)候我們就需要把我們狀態(tài)的各種操作進(jìn)行一個(gè)分組，分組后再進(jìn)行按組編寫。那今天我們就學(xué)習(xí)一下module：狀態(tài)管理器的模塊組操作。

聲明模塊組：

在vuex/store.js中聲明模塊組，我們還是用我們的const常量的方法聲明模塊組。代碼如下:

  const moduleA={
    state,mutations,getters,actions
  }

聲明好后，我們需要修改原來 Vuex.Stroe里的值：

  export default new Vuex.Store({
    modules:{a:moduleA}
  })

在模板中使用

現(xiàn)在我們要在模板中使用count狀態(tài)，要用插值的形式寫入。 

<h4>{{$store.state.a.count}}</h4>

如果想用簡單的方法引入，還是要在我們的計(jì)算屬性中rutrun我們的狀態(tài)。寫法如下：

  computed:{
    count(){
      return this.$store.state.a.count;
    }
  },

以上是“如何使用Vuex”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！