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