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

在宣恩等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站建設(shè)、網(wǎng)站制作 網(wǎng)站設(shè)計制作按需搭建網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),全網(wǎng)營銷推廣,成都外貿(mào)網(wǎng)站建設(shè),宣恩網(wǎng)站建設(shè)費(fèi)用合理。

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

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

Vuex采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級調(diào)試功能。

Vuex中的核心特性

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

在組件中訪問State的方式：

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

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

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

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

使用方式：

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

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

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

+1

methods:{
  Add(){
    //使用commit函數(shù)調(diào)用mutations中的對應(yīng)函數(shù)，
    //第一個參數(shù)就是我們要調(diào)用的mutations中的函數(shù)名
    //第二個參數(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)擊按鈕時觸發(fā)Sub函數(shù)
      Sub(){
          //調(diào)用sub函數(shù)完成對數(shù)據(jù)的操作
          this.sub(10);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}

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

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

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

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

...+1

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

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

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

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

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

{{$store.getters.showNum}}

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

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

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