Vue?Vuex搭建vuex環(huán)境及vuex求和案例分享
更新時間：2022年04月15日 11:29:49 作者：Errol_King
這篇文章主要介紹了Vue?Vuex搭建vuex環(huán)境及vuex求和案例分享，?Vue?中實現集中式狀態(tài)管理的一個?Vue?插件，對?vue?應用中多個組件的共享狀態(tài)進行集中式的管理，下文相關介紹,需要的朋友可以參考一下
Vuex介紹
概念
在 Vue 中實現集中式狀態(tài)(數據)管理的一個 Vue 插件，對 vue 應用中多個組件的共享狀態(tài)進行集中式的管理(讀寫)，也是一種組件間通信的方式，且適用于任意組件間通信
何時使用
多個組件需要共享數據時
求和案例–純vue版
新建 Count.vue 組件，并在 App.vue 中注冊引用
<template>
? <div>
? ? <Count/>
? </div>
</template>
<script>
import Count from "@/components/Count";
export default {
? name: 'App',
? components: {Count},
}
</script>
<style>
</style>我們主要關注 Count.vue
<template>
? <div class="category">
? ? <h1>當前求和為：{{ sum }}</h1>
? ? <select v-model="n">
? ? ? <!--這里的value前有冒號，否則value值是字符串-->
? ? ? <option :value="1">1</option>
? ? ? <option :value="2">2</option>
? ? ? <option :value="3">3</option>
? ? </select>
? ? <!--v-model.number收集到的數據強轉為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">當前和為奇數再加</button>
? ? <button @click="incrementWait">等一等再加</button>
? </div>
</template>
<script>
export default {
? name: "Count",
? data() {
? ? return {
? ? ? n: 1,//用戶選擇的數字
? ? ? sum: 0,//當前和
? ? }
? },
? 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 版本
因為我們使用的是 vue2 所以我們需要安裝 vuex 的 3 版本
- 1、執(zhí)行 npm i vuex@3 來安裝 vuex 3 版本
- 2、src 下創(chuàng)建 store 文件夾，在其中創(chuàng)建一個 index.js
index.js
//該文件用于創(chuàng)建vuex中最為核心的store
//引入vuex
import Vuex from 'vuex'
//引入vue
import Vue from "vue";
//應用vuex插件
Vue.use(Vuex)
//準備actions；用于相應組件中的動作
const actions = {}
//準備mutations；用于操作數據（state）
const mutations = {}
//準備state；用于存儲數據
const state = {}
//創(chuàng)建并暴露store
export default new Vuex.Store({
? ? actions:actions,
? ? mutations,//key和value重名了，簡寫
? ? state,//key和value重名了，簡寫
});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ā)簡寫形式
? ? ......
})運行項目，我們可以打印 vm 和 vc，可以看到 $store
求和案例–vuex版
我們將求和的案例改為 vuex 版本
1、首先把數據交給 state
所以我們把 Count 組件中的數據 sum 變量剪切走放到 index.js 中的 state 中，同時 Count 組件中的方法，例如加法 increment 中使用 this.$store.dispatch("方法名",變量) 來替代原來的方法。這樣就走完了流程圖中以下部分
Count.vue
<template>
? <div class="category">
? ? <h1>當前求和為：{{$store.state.sum}}</h1>
?? ?......
? </div>
</template>
<script>
export default {
? name: "Count",
? data() {
? ? return {
? ? ? n: 1,//用戶選擇的數字
? ? }
? },
? methods: {
? ? increment() {
? ? ? this.$store.dispatch("jia",this.n);
? ? }
? ? ......
? }
}
</script>同時 index.js 中的 action 中添加對應的方法名，從圖上的流程圖來看，actions 中的東西會交到 mutations 中處理，所以需要手動調用 commit方法
mutation 中也需要增加同樣的方法名，這里可以都改成大寫，做個區(qū)分。方法中第一個參數就是 state，方法中處理真實邏輯即可
index.js
//該文件用于創(chuàng)建vuex中最為核心的store
//引入vuex
import Vuex from 'vuex'
//引入vue
import Vue from "vue";
//應用vuex插件
Vue.use(Vuex)
//準備actions；用于相應組件中的動作
const actions = {
? ? /*jia:function () {
? ? }*/
? ? //簡寫為：
? ? jia(context,value){
? ? ? ? console.log("actions中的jia被調用了",context,value);
? ? ? ? context.commit("JIA",value)
? ? }
}
//準備mutations；用于操作數據（state）
const mutations = {
? ? JIA(state,value){
? ? ? ? console.log("mutations中的JIA被調用了",state,value);
? ? ? ? state.sum += value;
? ? }
}
//準備state；用于存儲數據
const state = {
? ? sum: 0,//當前和
}
//創(chuàng)建并暴露store
export default new Vuex.Store({
? ? actions:actions,
? ? mutations,//key和value重名了，簡寫
? ? state,//key和value重名了，簡寫
});log 輸出：
運行程序：
我們根據以上思路完善其他方法
Count.vue
<template>
? <div class="category">
? ? <h1>當前求和為：{{$store.state.sum}}</h1>
? ? <select v-model="n">
? ? ? <!--這里的value前有冒號，否則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">當前和為奇數再加</button>
? ? <button @click="incrementWait">等一等再加</button>
? </div>
</template>
<script>
export default {
? name: "Count",
? data() {
? ? return {
? ? ? n: 1,//用戶選擇的數字
? ? }
? },
? 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";
//應用vuex插件
Vue.use(Vuex)
//準備actions；用于相應組件中的動作
const actions = {
? ? /*jia:function () {
? ? }*/
? ? //簡寫為：
? ? jia(context,value){
? ? ? ? console.log("actions中的jia被調用了");
? ? ? ? context.commit("JIA",value)
? ? },
? ? jiaOdd(context,value){
? ? ? ? console.log("actions中的jianOdd被調用了");
? ? ? ? if(context.state.sum % 2){
? ? ? ? ? ? context.commit("JIA",value)
? ? ? ? }
? ? },
? ? jiaWait(context,value){
? ? ? ? console.log("actions中的jianWait被調用了");
? ? ? ? setTimeout(() => {
? ? ? ? ? ? context.commit("JIA",value)
? ? ? ? }, 500)
? ? }
}
//準備mutations；用于操作數據（state）
const mutations = {
? ? JIA(state,value){
? ? ? ? console.log("mutations中的JIA被調用了",state,value);
? ? ? ? state.sum += value;
? ? },
? ? JIAN(state,value){
? ? ? ? console.log("mutations中的JIAN被調用了",state,value);
? ? ? ? state.sum -= value;
? ? }
}
//準備state；用于存儲數據
const state = {
? ? sum: 0,//當前和
}
//創(chuàng)建并暴露store
export default new Vuex.Store({
? ? actions:actions,
? ? mutations,//key和value重名了，簡寫
? ? state,//key和value重名了，簡寫
});到此為止，功能就實現了，你發(fā)現了嗎，這里做了些優(yōu)化，由于 index.js 中的 jia、jian方法里邊什么都沒做，直接就 commit 給了 mutation，而 vc 是可以直接對話 Mutations 的，如下圖：
所以我們把 index.js 中 actions 中的 jian方法去掉，在 Count 中直接調用 mutation 中的方法，也就是我們把 jian方法去掉，在 Count 的 decrement 方法中直接調用 commit 了
decrement() {
?? ?this.$store.commit("JIAN",this.n);
},若沒有網絡請求或其他業(yè)務邏輯，組件中也可以越過 actions，即不寫 dispatch，直接編寫 commit
一些疑惑和問題
index.js 中的上下文有什么作用？我們可以打印下 context：
可以看到其中有dispatch、commit、state這些熟悉的身影。我們用 jiaOdd 舉例，當方法邏輯處理復雜時，可以繼續(xù) dispatch 其他方法來分擔。而有了 state 我們可以拿到其中的 sum 值：
?? ?jiaOdd(context,value){
? ? ? ? console.log("actions中的jianOdd被調用了",context);
? ? ? ? if(context.state.sum % 2){
? ? ? ? ? ? context.commit("JIA",value)
? ? ? ? }
? ? ? ? context.dispatch("demo",value)
? ? },
? ? demo() {
? ? ? ? //處理一些事情
? ? },
到此這篇關于Vue Vuex搭建vuex環(huán)境及vuex求和案例分享的文章就介紹到這了,更多相關Vue Vuex 搭建內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
如何利用Vue3+Element?Plus實現動態(tài)標簽頁及右鍵菜單
標簽頁一般配合菜單實現,當你點擊一級菜單或者二級菜單時,可以增加對應的標簽頁,當你點擊對應的標簽頁,可以觸發(fā)對應的一級菜單或者二級菜單,下面這篇文章主要給大家介紹了關于如何利用Vue3+Element?Plus實現動態(tài)標簽頁及右鍵菜單的相關資料,需要的朋友可以參考下2022-11-11
詳解element-ui表格的合并行和列(非常細節(jié))
最近在需求中遇到了elementUI合并行,索性給大家整理下,這篇文章主要給大家介紹了關于element-ui表格的合并行和列的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
element-ui?table表格控件實現單選功能代碼實例
這篇文章主要給大家介紹了關于element-ui?table表格控件實現單選功能的相關資料,單選框是指在?Element?UI?的表格組件中,可以通過單選框來選擇一行數據。用戶只能選擇一行數據,而不能同時選擇多行,需要的朋友可以參考下2023-09-09
文章展示了基于Vue封裝的標準漏斗圖的代碼,包括權重算法、滾輪監(jiān)聽和點擊示例功能,旨在提供實用的圖表展示技巧2025-02-02
Jenkins?Sidebar?Link插件實現添加側邊欄功能詳解
這篇文章主要介紹了vue框架實現添加側邊欄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了vue篇之事件總線EventBus使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要給大家介紹了關于vue中keep-alive組件的入門使用教程，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
這篇文章主要介紹了vue實現element-ui對話框可拖拽功能，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
下面小編就為大家分享一篇利用vue.js實現被選中狀態(tài)的改變方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了關于vant的時間選擇器使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03