欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2022年04月15日 11:46:19   作者：Errol_King  
這篇文章主要介紹了Vue??vuex配置項和多組件數(shù)據(jù)共享案例分享，文章圍繞Vue?Vuex的相關資料展開配置項和多組件數(shù)據(jù)共享的案例分享，需要的小伙伴可以參考一下

沒有看過上一篇的同學可以查看： Vue Vuex搭建vuex環(huán)境及vuex求和案例分享

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>

總結：

  • 1.概念：當 state 中的數(shù)據(jù)需要經過加工后再使用時，可以使用 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 生成對用的方法，方法中會調用 commit去聯(lián)系mutations(數(shù)組寫法)
? ? ...mapMutations(["JIA","JIAN"]),

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

mapMutations 對象寫法

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

mapMutations 數(shù)組寫法

?<button @click="jiaOdd(n)">當前和為奇數(shù)再加</button>
? ? <button @click="jiaWait(n)">等一等再加</button>
? ? methods:{
?? ?//借助 mapActions 生成對用的方法，方法中會調用 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被調用了",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 組件中總人數(shù)，Person 組件展示 Count 組件的求和數(shù)

修改 Count 組件

<h3 style="color: red">Person組件的總人數(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>

查看效果：

到此這篇關于Vue  vuex配置項和多組件數(shù)據(jù)共享案例分享的文章就介紹到這了,更多相關Vue Vuex案例內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • Vue富文本插件(quill-editor)的使用及說明

    Vue富文本插件(quill-editor)的使用及說明

    這篇文章主要介紹了Vue富文本插件(quill-editor)的使用及說明，具有很好的參考價值，希望對大家有所幫助。
    2023-02-02
  • vue?ui的安裝步驟以及使用詳解

    vue?ui的安裝步驟以及使用詳解

    最近公司開發(fā)一個項目,采用的前后端分離的方式,前端采用vue,但是再項目開發(fā)過程中遇到一個比較麻煩的問題,下面這篇文章主要給大家介紹了關于vue?ui的安裝步驟以及使用的相關資料,需要的朋友可以參考下
    2022-08-08
  • Vue.js常用指令之循環(huán)使用v-for指令教程

    Vue.js常用指令之循環(huán)使用v-for指令教程

    這篇文章主要跟大家介紹了關于Vue.js常用指令之循環(huán)使用v-for指令的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
    2017-06-06
  • vue制作點擊切換圖片效果的詳細思路與步驟

    vue制作點擊切換圖片效果的詳細思路與步驟

    這篇文章主要給大家介紹了關于vue制作點擊切換圖片效果的詳細思路與步驟,圖片切換是一個很經典的Vue入門學習案例,在你學習完一些基本的v-指令后,你可以嘗試去寫一個簡單的demo去鞏固和熟悉這些指令的使用方法,需要的朋友可以參考下
    2023-11-11
  • Vue虛擬DOM詳細介紹

    Vue虛擬DOM詳細介紹

    虛擬DOM的概念是通過狀態(tài)生成一個虛擬節(jié)點樹，然后使用虛擬節(jié)點樹進行渲染。在渲染之前，會使用新生成的虛擬節(jié)點和上一次生成的虛擬節(jié)點進行對比，只渲染不同的部分
    2022-08-08
  • vue2 自定義動態(tài)組件所遇到的問題

    vue2 自定義動態(tài)組件所遇到的問題

    這篇文章主要介紹了vue2 自定義 動態(tài)組件的實現(xiàn)方法,需要的朋友可以參考下
    2017-06-06
  • Element-ui設置el-table表頭全選框隱藏或禁用

    Element-ui設置el-table表頭全選框隱藏或禁用

    這篇文章主要給大家介紹了關于Element-ui設置el-table表頭全選框隱藏或禁用的相關資料,文中手把手教你實現(xiàn)el-table實現(xiàn)跨表格禁用選項,需要的朋友可以參考下
    2023-07-07
  • 如何在vue中使用unocss以及基本使用方法

    如何在vue中使用unocss以及基本使用方法

    這篇文章主要給大家介紹了關于如何在vue中使用unocss以及基本使用方法的相關資料,unocss是一個即時的原子CSS引擎,它可以讓你用簡短的類名來控制元素的樣式,而不需要寫復雜的CSS代碼,需要的朋友可以參考下
    2023-07-07
  • vue實現(xiàn)發(fā)送短信倒計時和重發(fā)短信功能的示例詳解

    vue實現(xiàn)發(fā)送短信倒計時和重發(fā)短信功能的示例詳解

    這篇文章主要給大家介紹了vue實現(xiàn)發(fā)送短信倒計時和重發(fā)短信功能的相關知識,文中通過代碼示例給大家介紹的非常詳細,需要的朋友可以參考下
    2023-12-12
  • element UI 2.15.13與vue2.0表格勾選回顯關鍵demo

    element UI 2.15.13與vue2.0表格勾選回顯關鍵demo

    這篇文章主要為大家介紹了element UI 2.15.13與vue2.0表格勾選回顯關鍵demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-11-11

最新評論