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(&#39;add&#39;,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(&#39;addAsync&#39;,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

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

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

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

相關建議：

2020年前端vue面試題大匯總（附答案）

vue教學推薦：2020最新的5個vue.js影片教學精選

更多程式相關知識，請造訪：

程式教學！ ！

以上是vuex有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！