Vue??vuex配置項和多組件數(shù)據(jù)共享案例分享

更新時間：2022年04月15日 11:46:19 作者：Errol_King

這篇文章主要介紹了Vue??vuex配置項和多組件數(shù)據(jù)共享案例分享，文章圍繞Vue?Vuex的相關(guān)資料展開配置項和多組件數(shù)據(jù)共享的案例分享，需要的小伙伴可以參考一下

getters 配置項

index.js 中增加 getters 配置項

//準備getters，用于將state中的數(shù)據(jù)進行加工
const getters = {
? ? bigSum(state){
? ? ? ? return state.sum*10
? ? }
}

//創(chuàng)建并暴露store
export default new Vuex.Store({
? ? ......
? ? getters,
});

Count.vue 中使用

<h1>當前求和10倍為：{{$store.getters.bigSum}}</h1>

總結(jié)：

1.概念：當 state 中的數(shù)據(jù)需要經(jīng)過加工后再使用時，可以使用 getters 加工
2.在 store.js中追加 getters 配置

//準備getters，用于將state中的數(shù)據(jù)進行加工
const getters = {
? ? bigSum(state){
? ? ? ? return state.sum*10
? ? }
}

//創(chuàng)建并暴露store
export default new Vuex.Store({
? ? ......
? ? getters,
});

3.組件中讀取數(shù)據(jù)：$store.getters.bigSum

mapState、mapGetters

首先引入問題。我們在 index.js 中增加學校和學科字段

const state = {
? ? sum: 0,//當前和
? ? school:"三里屯小學",
? ? subject:"Vue",
}

Count.vue 中使用

?? ?<h1>當前求和為：{{$store.state.sum}}</h1>
? ? <h3>當前求和10倍為：{{$store.getters.bigSum}}</h3>
? ? <h3>我在：{{$store.state.school}}學習{{$store.state.subject}}</h3>

查看下當前效果：

我們發(fā)現(xiàn)每次取值時都是 store.state.xxx或者$store.getters.xxx，太長了，有的同學想到了寫計算屬性來簡化

?? ?<h1>當前求和為：{{he}}</h1>
? ? <h3>當前求和10倍為：{{$store.getters.bigSum}}</h3>
? ? <h3>我在：{{xuexiao}}學習{{xueke}}</h3>

computed:{
? ? he(){
? ? ? return this.$store.state.sum
? ? },
? ? xuexiao(){
? ? ? return this.$store.state.school
? ? },
? ? xueke(){
? ? ? return this.$store.state.subject
? ? }
? }

當然可以使用要學習的這個 mapState

? ?<h1>當前求和為：{{he}}</h1>
? ? <h3>當前求和10倍為：{{$store.getters.bigSum}}</h3>
? ? <h3>我在：{{xuexiao}}學習{{xueke}}</h3>
?? ?computed:{
? ? ?? ?//借助mapstate生成計算屬性，從state中讀取數(shù)據(jù)（對象寫法）
? ? ?? ?...mapState({he:"sum",xuexiao:"school",xueke:"subject"})
? ? ?? ?//或者
? ? ?? ?//借助mapstate生成計算屬性，從state中讀取數(shù)據(jù)（數(shù)組寫法）
? ??? ??? ?...mapState(['sum','school',"subject"])
? ?? ?},

其中…這里是 ES6 的語法，舉個例子

?? ?let obj1 = {x:100,y:200}
? ? ? ? let obj2 = {
? ? ? ? ? ? a:1,
? ? ? ? ? ? ...obj1,
? ? ? ? ? ? b:2,
? ? ?}
? ? ?console.log(obj2);

所以...mapState({he:"sum",xuexiao:"school",xueke:"subject"})就相當于我們在 computed 中增加了開始寫的那一堆方法

同樣 mapGetters

<h3>當前求和10倍為：{{ bigSum }}</h3>

computed: {
? ?......
? ? //...mapGetters({bigSum:'bigSum'})
? ? ...mapGetters(['bigSum'])
? },

mapActions、mapMutations

mapMutations 對象寫法

 ?<button @click="increment(n)">+</button>
? ? <button @click="decrement(n)">-</button>

?? ?methods: {
? ? /*increment() {
? ? ? this.$store.commit("JIA", this.n);
? ? },
? ? decrement() {
? ? ? this.$store.commit("JIAN", this.n);
? ? },*/
? ? ...mapMutations({"increment":"JIA","decrement":"JIAN"}),
? ?......
? }

mapMutations 數(shù)組寫法

 ?<button @click="JIA(n)">+</button>
? ? <button @click="JIAN(n)">-</button>

?? ?//借助 mapMutations 生成對用的方法，方法中會調(diào)用 commit去聯(lián)系mutations(數(shù)組寫法)
? ? ...mapMutations(["JIA","JIAN"]),

數(shù)組的這種寫法意思是生成方法名為 JIA，commit 的方法名也為 JIA 才能這樣寫，所以調(diào)用時，我們方法名要寫 JIA，同樣的也要把參數(shù)傳進去

mapMutations 對象寫法

?? ?<button @click="incrementOdd(n)">當前和為奇數(shù)再加</button>
? ? <button @click="incrementWait(n)">等一等再加</button>
? ??
methods:{
?? ?//借助 mapActions 生成對用的方法，方法中會調(diào)用 dispatch 去聯(lián)系 actions(對象寫法)
?? ?...mapActions({incrementOdd:"jiaOdd",incrementWait:"jiaWait"})
}

mapMutations 數(shù)組寫法

?<button @click="jiaOdd(n)">當前和為奇數(shù)再加</button>
? ? <button @click="jiaWait(n)">等一等再加</button>
? ? methods:{
?? ?//借助 mapActions 生成對用的方法，方法中會調(diào)用 dispatch 去聯(lián)系 actions(數(shù)組寫法)
? ? ...mapActions(["jiaOdd","jiaWait"])
? ? }

多組件共享數(shù)據(jù)

現(xiàn)在再寫一個 Person 組件，展示人員信息。要完成 Person 組件展示剛才 Count 組件中的 sum 值。而 Count 組件展示人員信息

我們首先完成 Person 組件的人員展示和添加。首先在 index.js 中的 state 中存入 personList 做為要展示的人員數(shù)據(jù)。然后在 Person.vue 中使用 v-for 循環(huán)出人員數(shù)據(jù)

然后實現(xiàn)添加人員方法。正常應該在 index.js 中的 actions 寫方法，然后 commit 給 mutations，但是因為邏輯比較簡單，所以我們直接在 mutations 中寫一個添加人員的方法 ADD_PERSON，然后在 Person.vue 中使用 this.$store.commit提交添加的人員數(shù)據(jù)即可。

先看效果：

完整代碼如下(僅展示改動的代碼)：

index.js

......
//準備mutations；用于操作數(shù)據(jù)（state）
const mutations = {
? ? ......
? ? ADD_PERSON(state,value){
? ? ? ? console.log("mutations中的ADD_PERSON被調(diào)用了",state,value);
? ? ? ? state.personList.unshift(value)
? ? }
}

//準備state；用于存儲數(shù)據(jù)
const state = {
? ? ......
? ? personList:[
? ? ? ? {id:"001",name:"張三"},
? ? ? ? {id:"002",name:"李四"}
? ? ]
}
......

Person.vue

<template>
? <div class="category">
? ? <h1>人員信息</h1>
? ? <input type="text" placeholder="請輸入名字" v-model="name"/>
? ? <button @click="add">添加</button>
? ? <ul>
? ? ? <li v-for="person in personList" :key="person.id">{{person.name}}</li>
? ? </ul>
? </div>
</template>

<script>
import {nanoid} from "nanoid"
export default {
? name: "Person",
? data(){
? ? return{
? ? ? name:""
? ? }
? },
? methods:{
? ? add(){
? ? ? const personObj = {id:nanoid(),name:this.name}
? ? ? this.$store.commit("ADD_PERSON",personObj)
? ? }
? },
? computed:{
? ? personList(){
? ? ? return this.$store.state.personList;
? ? }
? }
}
</script>

<style scoped>
select, button {
? margin-right: 5px;
}
</style>

App.vue 中引入組件并使用

<template>
? <div>
? ? <Count/>
? ? <hr>
? ? <Person/>
? </div>
</template>

<script>
import Count from "@/components/Count";
import Person from "@/components/Person";

export default {
? name: 'App',
? components: {Count,Person},
}
</script>

<style>

</style>

下面實現(xiàn)數(shù)據(jù)共享，我們讓 Count 組件展示 Person 組件中總?cè)藬?shù)，Person 組件展示 Count 組件的求和數(shù)

修改 Count 組件

<h3 style="color: red">Person組件的總?cè)藬?shù)為{{personList.length}}</h3>

<script>
......
export default {
? ......
? computed: {
? ...
? ? ...mapState(['sum','school',"subject","personList"])
? ? ...
? }
? ......
}
</script>

修改 Person 組件

<h3 style="color: red">Count組件求和為{{sum}}</h3>
<script>
......
export default {
? ......
? computed:{
? ? ......
? ? sum(){
? ? ? return this.$store.state.sum;
? ? }
? }
}
</script>

查看效果：