集中式狀態(tài)管理Vuex如何使用

這篇文章主要講解了“集中式狀態(tài)管理Vuex如何使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“集中式狀態(tài)管理Vuex如何使用”吧！

創(chuàng)新互聯(lián)建站自成立以來，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計、做網(wǎng)站、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營銷服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開發(fā)管理經(jīng)驗、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開發(fā)工程師團(tuán)隊及專業(yè)的網(wǎng)站設(shè)計師團(tuán)隊。

1.vuex是什么

一個專門在Vue中實現(xiàn)集中式狀態(tài)管理的一個Vue插件,可以對vue應(yīng)用中多個組件的共享狀態(tài)進(jìn)行集中式的管理(讀取/寫入)，也是一種組件間通信的方式，并且適用于任意組件間通信

2.什么時候使用Vuex

1.多個組件依賴于同一狀態(tài)

2.來自不同組件的行為需要變更同一狀態(tài)

2.1如何使用Vuex

首先我們要知道，如果使用了Vuex就大概率需要兩個或者多個組件共享一套數(shù)據(jù)/狀態(tài)，所以首先需要準(zhǔn)備兩個組件（分別為Count，Person），再就是我們要在src目錄下添加一個store文件，因為Vuex就是依靠store來進(jìn)行一系列的準(zhǔn)備任務(wù)的

2.2Count組件

在這個組件內(nèi)我們可以看到map...一堆東西，這里我們就不得不說vuex里面的四個map了，如何使用map方法我放到了最后，這里我們只介紹一下該組件的功能Count是個有著“強(qiáng)大”計算功能的組件，它可以進(jìn)行將最后的數(shù)進(jìn)行放大10倍，可以奇數(shù)運(yùn)算，可以延遲運(yùn)算可謂是極其的“強(qiáng)大”

<template>
  <div>
    <h4>當(dāng)前和為：{{sum}}</h4>
    <h4>當(dāng)前和為：放大10倍：{{bigSum}}</h4>
    <h4>我在{{school}},學(xué)習(xí){{subject}}</h4>
    <h4>下方組件的總?cè)藬?shù){{personList.length}}</h4>

    <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)">奇數(shù)＋</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 // 用戶選擇的數(shù)字
    };
  },
  computed: {
    // 使用mapState生成計算屬性，從state種讀取數(shù)據(jù)(...mapstate()的意思是將其內(nèi)的對象全部展開的計算屬性里面)
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 對象寫法
    ...mapState(["sum", "school", "subject", "personList"]), // 數(shù)組寫法
    // 使用mapGetters生成計算屬性，從getters種讀取數(shù)據(jù)
    // ...mapGetters(["bigSum"]), // 數(shù)組寫法
    ...mapGetters({ bigSum: "bigSum" }) // 數(shù)組寫法
  },
  methods: {
    // 借助mapMutations生成對應(yīng)的方法，方法種會調(diào)用相應(yīng)的commit去聯(lián)系mutations
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 對象式
    ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }) //數(shù)組式
    // ...mapActions(["jiaodd", "jiaWait"]) //數(shù)組式簡寫
  },
  mounted() {
  }
};
</script>
<style>
button {
  margin-left: 5px;
}
</style>

2.3Person組件

Person組件有著“強(qiáng)大”的人員添加的功能，他可以按照自己的意愿進(jìn)行添加你的親朋好友等

<template>
  <div>
    <h4>人員列表</h4>
    <h4>Count組件的求和為{{sum}}</h4>
    <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內(nèi)引入這兩個組件

<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文件里面進(jìn)行寫入如下代碼，首先是引入vue和vuex，再使用action進(jìn)行動作響應(yīng)，在這里我們可以接收到兩個參數(shù)分別式context和value他們分別式上下文和所傳入的值，我們可以再context身上發(fā)現(xiàn)我們所配置的state里面的所有東西,這就是context身上的東西，和value，這里value的值就是1

// 創(chuàng)建VUex種的store核心
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)
// 準(zhǔn)備actions——用于組件內(nèi)的動作響應(yīng)
const actions = {
    // 奇數(shù)加法
    jiaodd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    // 延遲加
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit("JIA", value)
        }, 500);
    },
}
// 準(zhǔn)備mutations——用于數(shù)據(jù)操作
const mutations = {
    JIA(state, value) {
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    },
    ADD_PERSON(state, value) {
        console.log('mustations種的ADD_PERSON被調(diào)用',state.personList);
        state.personList.unshift(value)
    }
}
// 準(zhǔn)備state——用于數(shù)據(jù)的儲存
const state = {
    sum: 0, // 當(dāng)前和
    school: '山魚小學(xué)',
    subject: '前端',
    personList:[{id:'001',name:'張三'}]
}
// 用于加工state種的數(shù)據(jù)
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
// 創(chuàng)建store并且暴露store
export default new Vuex.Store({
    // actions: actions,// 前后名稱一樣所以可以觸發(fā)簡寫模式
    actions,
    mutations,
    state,
    getters
});

2.四個map方法的使用

1.mapState:用于幫助我們映射state中的數(shù)據(jù)為計算屬性

computed: {
    // 使用mapState生成計算屬性，從state種讀取數(shù)據(jù)(...mapstate({})的意思是將其內(nèi)的對象全部展開的計算屬性里面)
    ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 對象寫法
        
    // ...mapState(["sum", "school", "subject"]), // 數(shù)組寫法
  }

2.mapGetters:用于幫助我們映射getters中的數(shù)據(jù)為計算屬性

computed: {
    // 使用mapGetters生成計算屬性，從getters種讀取數(shù)據(jù)
    ...mapGetters({bigSum："bigSum"})
    ...mapGetters(["bigSum"])
  }

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

methods: {
    // 借助mapMutations生成對應(yīng)的方法，方法種會調(diào)用相應(yīng)的commit去聯(lián)系mutations
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 對象式
    // ...mapMutations(["JIA", "JIAN"]), // 數(shù)組式(button的名字和vuex里面的名字必須統(tǒng)一)
  },

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

  methods: {
     // 借助mapActions生成對應(yīng)的方法，方法種會調(diào)用相應(yīng)的dispath去聯(lián)系actions
    ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }), //對象式
    // ...mapActions(["jiaodd", "jiaWait"]) //數(shù)組式
  },

注:mapActions與mapMutations使用時，若需要傳遞參數(shù)需要在模板中綁定事件時傳遞好參數(shù)，否則參數(shù)是事件對象。

感謝各位的閱讀，以上就是“集中式狀態(tài)管理Vuex如何使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對集中式狀態(tài)管理Vuex如何使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

本文題目：集中式狀態(tài)管理Vuex如何使用
分享網(wǎng)址：http://bm7419.com/article44/pcieee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、定制開發(fā)、網(wǎng)站營銷、虛擬主機(jī)、服務(wù)器托管、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)