vuex的作用是什么

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

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

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式，是基于vue框架的一個狀態管理庫。可以管理復雜應用的數據狀態，可以方便的實現組件之間的數據共享，比如兄弟組件的通信、多層嵌套的組件的傳值等等。

Vuex采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

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

Vuex中的核心特性

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

在組件中訪問State的方式：

A.this.$store.state.全局數據名稱 如：this.$store.state.count

B.先按需導入mapState函數： import { mapState } from ‘vuex’

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

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

使用方式：

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

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

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

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

methods:{
  Add(){
    //使用commit函數調用mutations中的對應函數，
    //第一個參數就是我們要調用的mutations中的函數名
    //第二個參數就是傳遞給add函數的參數
    this.$store.commit('add',10)
  }
}

使用mutations的第二種方式：

import { mapMutations } from ‘vuex’
methods:{…mapMutations([‘add’])}

如下：

import { mapState,mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //獲得mapMutations映射的sub函數
      ...mapMutations(['sub']),
      //當點擊按鈕時觸發Sub函數
      Sub(){
          //調用sub函數完成對數據的操作
          this.sub(10);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}

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

打開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：用于對Store中的數據進行加工處理形成新的數據。

它只會包裝Store中保存的數據，并不會修改Store中保存的數據，當Store中的數據發生變化時，Getter生成的內容也會隨之變化。
打開store.js文件，添加getters，如下：

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

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

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

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

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

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