站長(zhǎng)資訊網(wǎng)
如何使用集中式狀態(tài)管理的Vuex？下面本篇文章就帶大家了解一下vuex，簡(jiǎn)單聊聊vuex的使用方法，希望對(duì)大家有所幫助！
1.vuex是什么
一個(gè)專(zhuān)門(mén)在Vue中實(shí)現(xiàn)集中式狀態(tài)管理的一個(gè)Vue插件,可以對(duì)vue應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理(讀取/寫(xiě)入)，也是一種組件間通信的方式，并且適用于任意組件間通信
2.什么時(shí)候使用Vuex
1.多個(gè)組件依賴(lài)于同一狀態(tài)
2.來(lái)自不同組件的行為需要變更同一狀態(tài)
2.1如何使用Vuex
首先我們要知道，如果使用了Vuex就大概率需要兩個(gè)或者多個(gè)組件共享一套數(shù)據(jù)/狀態(tài)，所以首先需要準(zhǔn)備兩個(gè)組件（分別為Count，Person），再就是我們要在src目錄下添加一個(gè)store文件，因?yàn)閂uex就是依靠store來(lái)進(jìn)行一系列的準(zhǔn)備任務(wù)的
2.2Count組件
在這個(gè)組件內(nèi)我們可以看到map…一堆東西，這里我們就不得不說(shuō)vuex里面的四個(gè)map了，如何使用map方法我放到了最后，這里我們只介紹一下該組件的功能Count是個(gè)有著“強(qiáng)大”計(jì)算功能的組件，它可以進(jìn)行將最后的數(shù)進(jìn)行放大10倍，可以奇數(shù)運(yùn)算，可以延遲運(yùn)算可謂是極其的“強(qiáng)大”
<template> <div> <h3>當(dāng)前和為：{{sum}}</h3> <h3>當(dāng)前和為：放大10倍：{{bigSum}}</h3> <h3>我在{{school}},學(xué)習(xí){{subject}}</h3> <h3>下方組件的總?cè)藬?shù){{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)">奇數(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 // 用戶(hù)選擇的數(shù)字 }; }, computed: { // 使用mapState生成計(jì)算屬性，從state種讀取數(shù)據(jù)(...mapstate()的意思是將其內(nèi)的對(duì)象全部展開(kāi)的計(jì)算屬性里面) // ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 對(duì)象寫(xiě)法 ...mapState(["sum", "school", "subject", "personList"]), // 數(shù)組寫(xiě)法 // 使用mapGetters生成計(jì)算屬性，從getters種讀取數(shù)據(jù) // ...mapGetters(["bigSum"]), // 數(shù)組寫(xiě)法 ...mapGetters({ bigSum: "bigSum" }) // 數(shù)組寫(xiě)法 }, methods: { // 借助mapMutations生成對(duì)應(yīng)的方法，方法種會(huì)調(diào)用相應(yīng)的commit去聯(lián)系mutations ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 對(duì)象式 ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }) //數(shù)組式 // ...mapActions(["jiaodd", "jiaWait"]) //數(shù)組式簡(jiǎn)寫(xiě) }, mounted() { } }; </script> <style> button { margin-left: 5px; } </style>
2.3Person組件
Person組件有著“強(qiáng)大”的人員添加的功能，他可以按照自己的意愿進(jìn)行添加你的親朋好友等
<template> <div> <h3>人員列表</h3> <h3>Count組件的求和為{{sum}}</h3> <input type="text" placehodler="請(qǐng)輸入名字" 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)引入這兩個(gè)組件
<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文件夾下面新建一個(gè)index.js文件，然后再index文件里面進(jìn)行寫(xiě)入如下代碼，首先是引入vue和vuex，再使用action進(jìn)行動(dòng)作響應(yīng)，在這里我們可以接收到兩個(gè)參數(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)的動(dòng)作響應(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ù)的儲(chǔ)存 const state = { sum: 0, // 當(dāng)前和 school: '山魚(yú)小學(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,// 前后名稱(chēng)一樣所以可以觸發(fā)簡(jiǎn)寫(xiě)模式 actions, mutations, state, getters });
2.四個(gè)map方法的使用
1.mapState:用于幫助我們映射state中的數(shù)據(jù)為計(jì)算屬性
computed: { // 使用mapState生成計(jì)算屬性，從state種讀取數(shù)據(jù)(...mapstate({})的意思是將其內(nèi)的對(duì)象全部展開(kāi)的計(jì)算屬性里面) ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 對(duì)象寫(xiě)法 // ...mapState(["sum", "school", "subject"]), // 數(shù)組寫(xiě)法 }
2.mapGetters:用于幫助我們映射getters中的數(shù)據(jù)為計(jì)算屬性
computed: { // 使用mapGetters生成計(jì)算屬性，從getters種讀取數(shù)據(jù) ...mapGetters({bigSum："bigSum"}) ...mapGetters(["bigSum"]) }
3.mapMutations:用于幫助我們生成與mutations交流的方法，包含$store.commit()的函數(shù)
methods: { // 借助mapMutations生成對(duì)應(yīng)的方法，方法種會(huì)調(diào)用相應(yīng)的commit去聯(lián)系mutations ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 對(duì)象式 // ...mapMutations(["JIA", "JIAN"]), // 數(shù)組式(button的名字和vuex里面的名字必須統(tǒng)一) },
3.mapActions:用于幫助我們生成與mutations交流的方法，包含$store.commit()的函數(shù)
methods: { // 借助mapActions生成對(duì)應(yīng)的方法，方法種會(huì)調(diào)用相應(yīng)的dispath去聯(lián)系actions ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }), //對(duì)象式 // ...mapActions(["jiaodd", "jiaWait"]) //數(shù)組式 },
注:mapActions與mapMutations使用時(shí)，若需要傳遞參數(shù)需要在模板中綁定事件時(shí)傳遞好參數(shù)，否則參數(shù)是事件對(duì)象。
（學(xué)習(xí)視頻分享：vuejs入門(mén)教程、編程基礎(chǔ)視頻）
