Vuex中Store的簡(jiǎn)單實(shí)現(xiàn)
Vuex中Store的簡(jiǎn)單實(shí)現(xiàn)
安裝 Vuex 之后，讓我們來創(chuàng)建一個(gè) store。
創(chuàng)建過程直截了當(dāng)——僅需要提供一個(gè)初始 state 對(duì)象和一些 mutation：
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
state.count++
}
}
})
通過 store.state 來獲取狀態(tài)對(duì)象，以及通過 store.commit 方法觸發(fā)狀態(tài)變更：
store.commit('add')
console.log('store.state.count:' + store.state.count) // -> store.state.count:1
為了在 Vue 組件中訪問 this.$store property，你需要為 Vue 實(shí)例提供創(chuàng)建好的 store。Vuex 提供了一個(gè)從根組件向所有子組件，以 store 選項(xiàng)的方式 注入 該 store 的機(jī)制：
// main.js
new Vue({
el: '#app',
store
})
現(xiàn)在我們可以從組件的方法提交一個(gè)變更，進(jìn)而修改 state 中的 count 變量值：
methods: {
add() {
this.$store.commit('add')
console.log('state.count' + this.$store.state.count)
}
}
為什么用 mutation 方式修改 state 中定義的變量，而不是直接修改
- 我們通過提交 mutation 的方式，而非直接改變 store.state.count，是因?yàn)槲覀兿胍鞔_地追蹤到狀態(tài)的變化。
- 這個(gè)簡(jiǎn)單的約定能夠讓你的意圖更加明顯，這樣你在閱讀代碼的時(shí)候能更容易地解讀應(yīng)用內(nèi)部的狀態(tài)改變。
- 此外，這樣也讓我們有機(jī)會(huì)去實(shí)現(xiàn)一些能記錄每次狀態(tài)改變，保存狀態(tài)快照的調(diào)試工具。
由于 store 中的狀態(tài)是響應(yīng)式的，在組件中調(diào)用 store 中的狀態(tài)簡(jiǎn)單到僅需要在計(jì)算屬性中返回即可。觸發(fā)變化也僅僅是在組件的 methods 中提交 mutation。
到此這篇關(guān)于Vuex中Store的簡(jiǎn)單實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vuex中的Store內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇vue表單數(shù)據(jù)交互提交演示教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包為exe可安裝程序操作步驟的相關(guān)資料,Vue是一種流行的JavaScript框架,用于構(gòu)建單頁(yè)面應(yīng)用程序(SPA),需要的朋友可以參考下2023-12-12
這篇Vue3開發(fā)文檔，包含了 Vue3 開發(fā)中使用的所有語(yǔ)法，文中的示例代碼講解詳細(xì)，希望所有像他一樣還不熟的伙伴快速上手 Vue3，不會(huì)的再不看要遭老罪咯2023-04-04
vue3項(xiàng)目打包成apk(android)詳細(xì)圖文教程
Vue本身是一個(gè)構(gòu)建用戶界面的漸進(jìn)式框架,不能直接打包成APK文件,但是你可以使用工具將Vue應(yīng)用打包成一個(gè)可以在Android設(shè)備上安裝的APK文件,這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目打包成apk(android)的相關(guān)資料,需要的朋友可以參考下2024-05-05
vue-cli3自動(dòng)消除console.log()的調(diào)試信息方式
這篇文章主要介紹了vue-cli3自動(dòng)消除console.log()的調(diào)試信息方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
作為使用Vue的開發(fā)者，我們對(duì)Vue指令一定不陌生，諸如v-model、v-on、v-for、v-if等，同時(shí)Vue也為開發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時(shí)間開心的摸魚2022-11-11
Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式
這篇文章主要介紹了Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3+element-plus?Dialog對(duì)話框的使用與setup?寫法的用法
這篇文章主要介紹了vue3+element-plus?Dialog對(duì)話框的使用?與?setup?寫法的使用,本文通過兩種方式結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語(yǔ)法錯(cuò)誤的解決
這篇文章主要介紹了VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語(yǔ)法錯(cuò)誤的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue如何使用Promise.all()方法并行執(zhí)行多個(gè)請(qǐng)求
在Vue中,可以使用Promise.all()方法并行執(zhí)行多個(gè)異步請(qǐng)求,當(dāng)所有請(qǐng)求都成功返回時(shí),Promise.all()將返回一個(gè)包含所有請(qǐng)求結(jié)果的數(shù)組,如果其中任何一個(gè)請(qǐng)求失敗,則會(huì)觸發(fā)catch()方法并返回錯(cuò)誤信息,這種方式可以顯著提高程序的性能和響應(yīng)速度2025-01-01