Vue學(xué)習(xí)之Vuex的使用詳解
更新時(shí)間：2022年01月22日 14:53:39 作者：IT利刃出鞘
這篇文章主要介紹了Vue中的插件：Vuex。本文將圍繞它的優(yōu)缺點(diǎn)、使用場(chǎng)景和示例展開詳細(xì)的說明，感興趣的小伙伴可以跟隨小編一起了解一下
簡(jiǎn)介
說明
本文介紹Vue的插件：Vuex。包括：優(yōu)缺點(diǎn)、使用場(chǎng)景、示例。
官網(wǎng)
優(yōu)缺點(diǎn)
優(yōu)點(diǎn)
1.響應(yīng)式
屬于 vue 生態(tài)一環(huán),，能夠觸發(fā)響應(yīng)式的渲染頁面更新。 (localStorage 就不會(huì))
2.可預(yù)測(cè)的方式改變數(shù)據(jù)
避免數(shù)據(jù)污染
3.無需轉(zhuǎn)換數(shù)據(jù)
JS 原生的數(shù)據(jù)對(duì)象寫法（不需要做轉(zhuǎn)換）。（localStorage 需要做轉(zhuǎn)換）
缺點(diǎn)
1.復(fù)雜
適合大應(yīng)用，不適合小型應(yīng)用
2.不能持久化（刷新頁面后vuex中的state會(huì)變?yōu)槌跏紶顟B(tài)）
解決方案
結(jié)合localStorage
vuex-persistedstate插件
使用場(chǎng)景
當(dāng)我們多個(gè)頁面需要共享數(shù)據(jù)時(shí)就可以使用Vuex。
實(shí)際開發(fā)中我們一般在下面這種情況使用它：
當(dāng)前登錄用戶的信息
購物車的信息
收藏的信息
用戶的地理位置
示例
本處用計(jì)數(shù)器來測(cè)試：一個(gè)組件修改計(jì)數(shù)器的值，其余兩個(gè)不相關(guān)組件可以監(jiān)測(cè)到時(shí)計(jì)數(shù)器值的改變。
做法：一個(gè)組件(ComponentA）將數(shù)據(jù)共享給另外兩個(gè)不相關(guān)組件（ComponentB和ComponentC），外部用Parent.vue放置這三個(gè)組件。
安裝Vuex并引入
1.安裝vuex
在工程目錄下執(zhí)行：npm install vuex
2.編寫vuex的store
創(chuàng)建目錄store，在其下邊創(chuàng)建CounterStore.js，內(nèi)容如下：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const couterStore = new Vuex.Store(
{
state: {
count1: 0,
count2: 0,
},
mutations: {
increment1(state) {
state.count1++;
},
decrement1(state) {
state.count1--;
},
increment2: state => state.count2++,
decrement2: state => state.count2--,
}
}
);
export default couterStore;
3.main.js引入CounterStore.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import CouterStore from './store/CounterStore'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store: CouterStore,
components: { App },
template: '<App/>'
})
按照J(rèn)S語法，key與value重名時(shí)可以簡(jiǎn)寫：（很多教程這么寫）
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/CounterStore'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
業(yè)務(wù)代碼
代碼
ComponentA.vue
<template>
<div class="container">
<h3>ComponentA</h3>
<button @click="increment1">增加：第1個(gè)計(jì)數(shù)器</button>
<button @click="decrement1">減少：第1個(gè)計(jì)數(shù)器</button><br><br>
<button @click="increment2">增加：第2個(gè)計(jì)數(shù)器</button>
<button @click="decrement2">減少：第2個(gè)計(jì)數(shù)器</button>
</div>
</template>
<script>
export default {
data() {
return {
count1: 0,
count2: 0,
}
},
methods:{
increment1() {
this.$store.commit('increment1')
},
decrement1() {
this.$store.commit('decrement1')
},
increment2() {
this.$store.commit('increment2')
},
decrement2() {
this.$store.commit('decrement2')
}
}
}
</script>
<style scoped>
.container {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
ComponentB.vue
<template>
<div class="container">
<h3>ComponentB</h3>
計(jì)數(shù)器的值：{{msg}}
<!--也可以這么寫：-->
<!--計(jì)數(shù)器的值：{{this.$store.state.count1}}-->
</div>
</template>
<script>
export default {
computed:{
msg() {
return this.$store.state.count1;
}
}
}
</script>
<style scoped>
.container {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
ComponentC.vue
<template>
<div class="container">
<h3>ComponentC</h3>
計(jì)數(shù)器的值：{{msg}}
<!--也可以這么寫：-->
<!--計(jì)數(shù)器的值：{{this.$store.state.count2}}-->
</div>
</template>
<script>
export default {
computed:{
msg() {
return this.$store.state.count2;
}
}
}
</script>
<style scoped>
.container {
margin: 20px;
border: 2px solid blue;
padding: 20px;
}
</style>
Parent.vue
<template>
<div class="outer">
<h3>父組件</h3>
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
</template>
<script>
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";
import ComponentC from "./ComponentC";
export default {
name: 'Parent',
components: {ComponentA, ComponentB, ComponentC},
data() {
return {
name: 'Tony',
age: 20,
phoneNumber: '1234567890'
}
}
}
</script>
<style scoped>
.outer {
margin: 20px;
border: 2px solid red;
padding: 20px;
}
</style>
路由
import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";
Vue.use(Router)
export default new Router({
routes: [
{
path: '/parent',
name: 'Parent',
component: Parent,
}
],
})
測(cè)試
訪問： http://localhost:8080/#/parent
到此這篇關(guān)于Vue學(xué)習(xí)之Vuex的使用詳解的文章就介紹到這了,更多相關(guān)Vuex使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
Monaco-editor,一個(gè)vs?code?編輯器,需要將其繼承到項(xiàng)目,這篇文章主要為大家詳細(xì)介紹了如何在vue中安裝和使用Monaco-editor,有需要的小伙伴可以參考下2023-11-11
vue實(shí)現(xiàn)列表垂直無縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表垂直無縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了基于Vue實(shí)現(xiàn)電商SKU組合算法問題 ，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue在外部方法給下拉框賦值后不顯示label的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3新增了Composition API，我們只需將實(shí)現(xiàn)某一功能的相關(guān)代碼全部放進(jìn)一個(gè)函數(shù)中，然后return需要對(duì)外暴露的對(duì)象，這篇文章主要介紹了vue3 Composition API使用,需要的朋友可以參考下2022-12-12
Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式）
如果想要獲取選中的日期時(shí)間就需要通過,Element Plus 日期選擇器?format屬性和value-format屬性,format指定輸入框的格式,value-format?指定綁定值的格式,本篇文章就給大家介紹Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式）,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了關(guān)于Vue單元測(cè)試的幾個(gè)坑，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue實(shí)現(xiàn)a標(biāo)簽點(diǎn)擊高亮方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)a標(biāo)簽點(diǎn)擊高亮方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue安裝less-loader依賴失敗問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08