Vue?Vuex搭建vuex環(huán)境及vuex求和案例分享

更新時(shí)間：2022年04月15日 11:29:49 作者：Errol_King

這篇文章主要介紹了Vue?Vuex搭建vuex環(huán)境及vuex求和案例分享，?Vue?中實(shí)現(xiàn)集中式狀態(tài)管理的一個(gè)?Vue?插件，對(duì)?vue?應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理，下文相關(guān)介紹,需要的朋友可以參考一下

Vuex介紹

概念

在 Vue 中實(shí)現(xiàn)集中式狀態(tài)(數(shù)據(jù))管理的一個(gè) Vue 插件，對(duì) vue 應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理(讀寫)，也是一種組件間通信的方式，且適用于任意組件間通信

何時(shí)使用

多個(gè)組件需要共享數(shù)據(jù)時(shí)

求和案例–純vue版

新建 Count.vue 組件，并在 App.vue 中注冊(cè)引用

<template>
? <div>
? ? <Count/>
? </div>
</template>

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

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

<style>

</style>

我們主要關(guān)注 Count.vue

<template>
? <div class="category">
? ? <h1>當(dāng)前求和為：{{ sum }}</h1>
? ? <select v-model="n">
? ? ? <!--這里的value前有冒號(hào)，否則value值是字符串-->
? ? ? <option :value="1">1</option>
? ? ? <option :value="2">2</option>
? ? ? <option :value="3">3</option>
? ? </select>

? ? <!--v-model.number收集到的數(shù)據(jù)強(qiáng)轉(zhuǎn)為number-->
<!-- ? ?<select v-model.number="n">
? ? ? <option value="1">1</option>
? ? ? <option value="2">2</option>
? ? ? <option value="3">3</option>
? ? </select>-->
? ? <button @click="increment">+</button>
? ? <button @click="decrement">-</button>
? ? <button @click="incrementOdd">當(dāng)前和為奇數(shù)再加</button>
? ? <button @click="incrementWait">等一等再加</button>
? </div>
</template>

<script>
export default {
? name: "Count",
? data() {
? ? return {
? ? ? n: 1,//用戶選擇的數(shù)字
? ? ? sum: 0,//當(dāng)前和
? ? }
? },
? methods: {
? ? increment() {
? ? ? this.sum += this.n
? ? },
? ? decrement() {
? ? ? this.sum -= this.n
? ? },
? ? incrementOdd() {
? ? ? if (this.sum % 2) {
? ? ? ? this.sum += this.n
? ? ? }
? ? },
? ? incrementWait() {
? ? ? setTimeout(() => {
? ? ? ? this.sum += this.n
? ? ? }, 500)
? ? }
? }
}
</script>

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

搭建vuex環(huán)境

注意：

vue2 中要使用 vuex 的 3 版本
vue3 中要使用 vuex 的 4 版本

因?yàn)槲覀兪褂玫氖?vue2 所以我們需要安裝 vuex 的 3 版本

1、執(zhí)行 npm i vuex@3 來(lái)安裝 vuex 3 版本
2、src 下創(chuàng)建 store 文件夾，在其中創(chuàng)建一個(gè) index.js

index.js

//該文件用于創(chuàng)建vuex中最為核心的store

//引入vuex
import Vuex from 'vuex'
//引入vue
import Vue from "vue";
//應(yīng)用vuex插件
Vue.use(Vuex)

//準(zhǔn)備actions；用于相應(yīng)組件中的動(dòng)作
const actions = {}
//準(zhǔn)備mutations；用于操作數(shù)據(jù)（state）
const mutations = {}
//準(zhǔn)備state；用于存儲(chǔ)數(shù)據(jù)
const state = {}

//創(chuàng)建并暴露store
export default new Vuex.Store({
? ? actions:actions,
? ? mutations,//key和value重名了，簡(jiǎn)寫
? ? state,//key和value重名了，簡(jiǎn)寫
});

3、main.js 中引入剛才寫好的 store

......
//引入store
//import store from './store/index'
import store from './store'

......

//創(chuàng)建vm
new Vue({
? ? el: "#app",
? ? //store:store
? ? store,//觸發(fā)簡(jiǎn)寫形式
? ? ......
})

運(yùn)行項(xiàng)目，我們可以打印 vm 和 vc，可以看到 $store

求和案例–vuex版

我們將求和的案例改為 vuex 版本

1、首先把數(shù)據(jù)交給 state

所以我們把 Count 組件中的數(shù)據(jù) sum 變量剪切走放到 index.js 中的 state 中，同時(shí) Count 組件中的方法，例如加法 increment 中使用 this.$store.dispatch("方法名",變量) 來(lái)替代原來(lái)的方法。這樣就走完了流程圖中以下部分

Count.vue

<template>
? <div class="category">
? ? <h1>當(dāng)前求和為：{{$store.state.sum}}</h1>
?? ?......
? </div>
</template>

<script>
export default {
? name: "Count",
? data() {
? ? return {
? ? ? n: 1,//用戶選擇的數(shù)字
? ? }
? },
? methods: {
? ? increment() {
? ? ? this.$store.dispatch("jia",this.n);
? ? }
? ? ......
? }
}
</script>

同時(shí) index.js 中的 action 中添加對(duì)應(yīng)的方法名，從圖上的流程圖來(lái)看，actions 中的東西會(huì)交到 mutations 中處理，所以需要手動(dòng)調(diào)用 commit方法

mutation 中也需要增加同樣的方法名，這里可以都改成大寫，做個(gè)區(qū)分。方法中第一個(gè)參數(shù)就是 state，方法中處理真實(shí)邏輯即可

index.js

//該文件用于創(chuàng)建vuex中最為核心的store

//引入vuex
import Vuex from 'vuex'
//引入vue
import Vue from "vue";
//應(yīng)用vuex插件
Vue.use(Vuex)

//準(zhǔn)備actions；用于相應(yīng)組件中的動(dòng)作
const actions = {
? ? /*jia:function () {
? ? }*/
? ? //簡(jiǎn)寫為：
? ? jia(context,value){
? ? ? ? console.log("actions中的jia被調(diào)用了",context,value);
? ? ? ? context.commit("JIA",value)
? ? }
}
//準(zhǔn)備mutations；用于操作數(shù)據(jù)（state）
const mutations = {
? ? JIA(state,value){
? ? ? ? console.log("mutations中的JIA被調(diào)用了",state,value);
? ? ? ? state.sum += value;
? ? }
}

//準(zhǔn)備state；用于存儲(chǔ)數(shù)據(jù)
const state = {
? ? sum: 0,//當(dāng)前和
}

//創(chuàng)建并暴露store
export default new Vuex.Store({
? ? actions:actions,
? ? mutations,//key和value重名了，簡(jiǎn)寫
? ? state,//key和value重名了，簡(jiǎn)寫
});

log 輸出：

運(yùn)行程序：

我們根據(jù)以上思路完善其他方法

Count.vue

<template>
? <div class="category">
? ? <h1>當(dāng)前求和為：{{$store.state.sum}}</h1>
? ? <select v-model="n">
? ? ? <!--這里的value前有冒號(hào)，否則value值是字符串-->
? ? ? <option :value="1">1</option>
? ? ? <option :value="2">2</option>
? ? ? <option :value="3">3</option>
? ? </select>
? ? <button @click="increment">+</button>
? ? <button @click="decrement">-</button>
? ? <button @click="incrementOdd">當(dāng)前和為奇數(shù)再加</button>
? ? <button @click="incrementWait">等一等再加</button>
? </div>
</template>

<script>
export default {
? name: "Count",
? data() {
? ? return {
? ? ? n: 1,//用戶選擇的數(shù)字
? ? }
? },
? methods: {
? ? increment() {
? ? ? this.$store.dispatch("jia",this.n);
? ? },
? ? decrement() {
? ? ? this.$store.commit("JIAN",this.n);
? ? },
? ? incrementOdd() {
? ? ? this.$store.dispatch("jiaOdd",this.n);
? ? },
? ? incrementWait() {
? ? ? this.$store.dispatch("jiaWait",this.n);
? ? }
? }
}
</script>

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

index.js

//該文件用于創(chuàng)建vuex中最為核心的store

//引入vuex
import Vuex from 'vuex'
//引入vue
import Vue from "vue";
//應(yīng)用vuex插件
Vue.use(Vuex)

//準(zhǔn)備actions；用于相應(yīng)組件中的動(dòng)作
const actions = {
? ? /*jia:function () {
? ? }*/
? ? //簡(jiǎn)寫為：
? ? jia(context,value){
? ? ? ? console.log("actions中的jia被調(diào)用了");
? ? ? ? context.commit("JIA",value)
? ? },
? ? jiaOdd(context,value){
? ? ? ? console.log("actions中的jianOdd被調(diào)用了");
? ? ? ? if(context.state.sum % 2){
? ? ? ? ? ? context.commit("JIA",value)
? ? ? ? }
? ? },
? ? jiaWait(context,value){
? ? ? ? console.log("actions中的jianWait被調(diào)用了");
? ? ? ? setTimeout(() => {
? ? ? ? ? ? context.commit("JIA",value)
? ? ? ? }, 500)
? ? }
}
//準(zhǔn)備mutations；用于操作數(shù)據(jù)（state）
const mutations = {
? ? JIA(state,value){
? ? ? ? console.log("mutations中的JIA被調(diào)用了",state,value);
? ? ? ? state.sum += value;
? ? },
? ? JIAN(state,value){
? ? ? ? console.log("mutations中的JIAN被調(diào)用了",state,value);
? ? ? ? state.sum -= value;
? ? }
}

//準(zhǔn)備state；用于存儲(chǔ)數(shù)據(jù)
const state = {
? ? sum: 0,//當(dāng)前和
}

//創(chuàng)建并暴露store
export default new Vuex.Store({
? ? actions:actions,
? ? mutations,//key和value重名了，簡(jiǎn)寫
? ? state,//key和value重名了，簡(jiǎn)寫
});

到此為止，功能就實(shí)現(xiàn)了，你發(fā)現(xiàn)了嗎，這里做了些優(yōu)化，由于 index.js 中的 jia、jian方法里邊什么都沒做，直接就 commit 給了 mutation，而 vc 是可以直接對(duì)話 Mutations 的，如下圖：

所以我們把 index.js 中 actions 中的 jian方法去掉，在 Count 中直接調(diào)用 mutation 中的方法，也就是我們把 jian方法去掉，在 Count 的 decrement 方法中直接調(diào)用 commit 了

decrement() {
?? ?this.$store.commit("JIAN",this.n);
},

若沒有網(wǎng)絡(luò)請(qǐng)求或其他業(yè)務(wù)邏輯，組件中也可以越過(guò) actions，即不寫 dispatch，直接編寫 commit

一些疑惑和問題

index.js 中的上下文有什么作用？我們可以打印下 context：

可以看到其中有dispatch、commit、state這些熟悉的身影。我們用 jiaOdd 舉例，當(dāng)方法邏輯處理復(fù)雜時(shí)，可以繼續(xù) dispatch 其他方法來(lái)分擔(dān)。而有了 state 我們可以拿到其中的 sum 值：

?? ?jiaOdd(context,value){
? ? ? ? console.log("actions中的jianOdd被調(diào)用了",context);
? ? ? ? if(context.state.sum % 2){
? ? ? ? ? ? context.commit("JIA",value)
? ? ? ? }
? ? ? ? context.dispatch("demo",value)
? ? },
? ? demo() {
? ? ? ? //處理一些事情
? ? },

到此這篇關(guān)于Vue Vuex搭建vuex環(huán)境及vuex求和案例分享的文章就介紹到這了,更多相關(guān)Vue Vuex 搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: