vuex的作用是什么

這篇文章將為大家詳細(xì)講解有關(guān)vuex的作用是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

vuex是基于vue框架的一個(gè)狀態(tài)管理庫，可以管理復(fù)雜應(yīng)用的數(shù)據(jù)狀態(tài)，可以方便的實(shí)現(xiàn)組件之間的數(shù)據(jù)共享，例兄弟組件的通信、多層嵌套的組件的傳值等等；它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式，是基于vue框架的一個(gè)狀態(tài)管理庫?？梢怨芾韽?fù)雜應(yīng)用的數(shù)據(jù)狀態(tài)，可以方便的實(shí)現(xiàn)組件之間的數(shù)據(jù)共享，比如兄弟組件的通信、多層嵌套的組件的傳值等等。

Vuex采用集中式存儲(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)試功能。

Vuex中的核心特性

(1)State: 提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)都要統(tǒng)一放到Store中的State中存儲(chǔ)

在組件中訪問State的方式：

A.this.$store.state.全局?jǐn)?shù)據(jù)名稱 如：this.$store.state.count

B.先按需導(dǎo)入mapState函數(shù)： import { mapState } from ‘vuex’

然后數(shù)據(jù)映射為計(jì)算屬性： computed:{ …mapState([‘全局?jǐn)?shù)據(jù)名稱’]) }

(2) Mutation：用于修改變更$store中的數(shù)

使用方式：

打開store.js文件，在mutations中添加代碼如下：

mutations: {
    add(state,step){
      //第一個(gè)形參永遠(yuǎn)都是state也就是$state對(duì)象
      //第二個(gè)形參是調(diào)用add時(shí)傳遞的參數(shù)
      state.count+=step;
    }
  }

然后在Addition.vue中給按鈕添加事件代碼如下：

<button @click="Add">+1</button>

methods:{
  Add(){
    //使用commit函數(shù)調(diào)用mutations中的對(duì)應(yīng)函數(shù)，
    //第一個(gè)參數(shù)就是我們要調(diào)用的mutations中的函數(shù)名
    //第二個(gè)參數(shù)就是傳遞給add函數(shù)的參數(shù)
    this.$store.commit('add',10)
  }
}

使用mutations的第二種方式：

import { mapMutations } from ‘vuex’
methods:{…mapMutations([‘a(chǎn)dd’])}

如下：

import { mapState,mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //獲得mapMutations映射的sub函數(shù)
      ...mapMutations(['sub']),
      //當(dāng)點(diǎn)擊按鈕時(shí)觸發(fā)Sub函數(shù)
      Sub(){
          //調(diào)用sub函數(shù)完成對(duì)數(shù)據(jù)的操作
          this.sub(10);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}

(3)Action：在mutations中不能編寫異步的代碼，會(huì)導(dǎo)致vue調(diào)試器的顯示出錯(cuò)。在vuex中我們可以使用Action來執(zhí)行異步操作。
操作步驟如下：

打開store.js文件，修改Action，如下：

actions: {
  addAsync(context,step){
    setTimeout(()=>{
      context.commit('add',step);
    },2000)
  }
}

然后在Addition.vue中給按鈕添加事件代碼如下：

<button @click="AddAsync">...+1</button>

methods:{
  AddAsync(){
    this.$store.dispatch('addAsync',5)
  }
}

(4)Getter：用于對(duì)Store中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)。

它只會(huì)包裝Store中保存的數(shù)據(jù)，并不會(huì)修改Store中保存的數(shù)據(jù)，當(dāng)Store中的數(shù)據(jù)發(fā)生變化時(shí)，Getter生成的內(nèi)容也會(huì)隨之變化。
打開store.js文件，添加getters，如下：

export default new Vuex.Store({
  .......
  getters:{
    //添加了一個(gè)showNum的屬性
    showNum : state =>{
      return '最新的count值為：'+state.count;
    }
  }
})

然后打開Addition.vue中，添加插值表達(dá)式使用getters

<h4>{{$store.getters.showNum}}</h4>

也可以在Addition.vue中，導(dǎo)入mapGetters，并將之映射為計(jì)算屬性

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}

關(guān)于“vuex的作用是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。