技術文章 » 淺析集中式狀態管理Vuex的使用方法

淺析集中式狀態管理Vuex的使用方法

2023-02-04 14:00:19

如何使用集中式狀態管理的Vuex？下面本篇文章就帶大家瞭解一下vuex，簡單聊聊vuex的使用方法，希望對大家有所幫助！

1.vuex是什麼

一個專門在Vue中實現集中式狀態管理的一個Vue外掛,可以對vue應用中多個元件的共用狀態進行集中式的管理(讀取/寫入)，也是一種元件間通訊的方式，並且適用於任意元件間通訊

2.什麼時候使用Vuex

1.多個元件依賴於同一狀態

2.來自不同元件的行為需要變更同一狀態

2.1如何使用Vuex

首先我們要知道，如果使用了Vuex就大概率需要兩個或者多個元件共用一套資料/狀態，所以首先需要準備兩個元件（分別為Count，Person），再就是我們要在src目錄下新增一個store檔案，因為Vuex就是依靠store來進行一系列的準備任務的

2.2Count元件

在這個元件內我們可以看到map...一堆東西，這裡我們就不得不說vuex裡面的四個map了，如何使用map方法我放到了最後，這裡我們只介紹一下該元件的功能Count是個有著「強大」計算功能的元件，它可以進行將最後的數進行放大10倍，可以奇數運算，可以延遲運算可謂是極其的「強大」

<template>
  <div>
    <h3>當前和為：{{sum}}</h3>
    <h3>當前和為：放大10倍：{{bigSum}}</h3>
    <h3>我在{{school}},學習{{subject}}</h3>
    <h3>下方元件的總人數{{personList.length}}</h3>

    <select v-model.number="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(num)">＋</button>
    <button @click="decrement(num)">-</button>
    <button @click="incrementOdd(num)">奇數＋</button>
    <button @click="incrementWait(num)">500ms後再＋</button>
  </div>
</template>
<script>
// 引入mapState等
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      num: 1 // 使用者選擇的數位
    };
  },
  computed: {
    // 使用mapState生成計算屬性，從state種讀取資料(...mapstate()的意思是將其內的物件全部展開的計算屬性裡面)
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 物件寫法
    ...mapState(["sum", "school", "subject", "personList"]), // 陣列寫法
    // 使用mapGetters生成計算屬性，從getters種讀取資料
    // ...mapGetters(["bigSum"]), // 陣列寫法
    ...mapGetters({ bigSum: "bigSum" }) // 陣列寫法
  },
  methods: {
    // 藉助mapMutations生成對應的方法，方法種會呼叫相應的commit去聯絡mutations
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 物件式
    ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }) //陣列式
    // ...mapActions(["jiaodd", "jiaWait"]) //陣列式簡寫
  },
  mounted() {
  }
};
</script>
<style>
button {
  margin-left: 5px;
}
</style>
登入後複製

2.3Person元件

Person元件有著「強大」的人員新增的功能，他可以按照自己的意願進行新增你的親朋好友等

<template>
  <div>
    <h3>人員列表</h3>
    <h3>Count元件的求和為{{sum}}</h3>
    <input type="text" placehodler="請輸入名字" v-model="name">
    <button @click="add">新增</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>
<script>
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: ""
    };
  },
  computed: {
    personList() {
      return this.$store.state.personList;
    },
    sum() {
      return this.$store.state.sum;
    }
  },
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.commit("ADD_PERSON", personObj);
      this.name = "";
    }
  }
};
</script>
登入後複製

2.4引入元件

分別再App內引入這兩個元件

<template>
  <div class="container">
    <Count></Count>
    <Person/>
  </div>
</template>

<script>
import Count from "./components/Count";
import Person from "./components/Person";
export default {
  name: "App",
  components: { Count, Person }
};
</script>
登入後複製

2.5設定store資料夾下的index.js

要在store資料夾下面新建一個index.js檔案，然後再index檔案裡面進行寫入如下程式碼，首先是引入vue和vuex，再使用action進行動作響應，在這裡我們可以接收到兩個引數分別式context和value他們分別式上下文和所傳入的值，我們可以再context身上發現我們所設定的state裡面的所有東西,這就是context身上的東西，和value，這裡value的值就是1

// 建立VUex種的store核心
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex外掛
Vue.use(Vuex)
// 準備actions——用於元件內的動作響應
const actions = {
    // 奇數加法
    jiaodd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    // 延遲加
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit("JIA", value)
        }, 500);
    },
}
// 準備mutations——用於資料操作
const mutations = {
    JIA(state, value) {
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    },
    ADD_PERSON(state, value) {
        console.log('mustations種的ADD_PERSON被呼叫',state.personList);
        state.personList.unshift(value)
    }
}
// 準備state——用於資料的儲存
const state = {
    sum: 0, // 當前和
    school: '山魚小學',
    subject: '前端',
    personList:[{id:'001',name:'張三'}]
}
// 用於加工state種的資料
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
// 建立store並且暴露store
export default new Vuex.Store({
    // actions: actions,// 前後名稱一樣所以可以觸發簡寫模式
    actions,
    mutations,
    state,
    getters
});
登入後複製

2.四個map方法的使用

1.mapState:用於幫助我們對映state中的資料為計算屬性

computed: {
    // 使用mapState生成計算屬性，從state種讀取資料(...mapstate({})的意思是將其內的物件全部展開的計算屬性裡面)
    ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 物件寫法
        
    // ...mapState(["sum", "school", "subject"]), // 陣列寫法
  }
登入後複製

2.mapGetters:用於幫助我們對映getters中的資料為計算屬性

computed: {
    // 使用mapGetters生成計算屬性，從getters種讀取資料
    ...mapGetters({bigSum："bigSum"})
    ...mapGetters(["bigSum"])
  }
登入後複製

3.mapMutations:用於幫助我們生成與mutations交流的方法，包含$store.commit()的函數

methods: {
    // 藉助mapMutations生成對應的方法，方法種會呼叫相應的commit去聯絡mutations
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 物件式
    // ...mapMutations(["JIA", "JIAN"]), // 陣列式(button的名字和vuex裡面的名字必須統一)
  },
登入後複製

3.mapActions:用於幫助我們生成與mutations交流的方法，包含$store.commit()的函數

  methods: {
     // 藉助mapActions生成對應的方法，方法種會呼叫相應的dispath去聯絡actions
    ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }), //物件式
    // ...mapActions(["jiaodd", "jiaWait"]) //陣列式
  },
登入後複製

注:mapActions與mapMutations使用時，若需要傳遞引數需要在模板中繫結事件時傳遞好引數，否則引數是事件物件。

（學習視訊分享：、）

以上就是淺析集中式狀態管理Vuex的使用方法的詳細內容，更多請關注TW511.COM其它相關文章！