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)建過程直截了當(dā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)在我們可以從組件的方法提交一個變更，進(jì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)的變化。
- 這個簡單的約定能夠讓你的意圖更加明顯，這樣你在閱讀代碼的時候能更容易地解讀應(yīng)用內(nèi)部的狀態(tài)改變。
- 此外，這樣也讓我們有機會去實現(xiàn)一些能記錄每次狀態(tài)改變，保存狀態(tài)快照的調(diào)試工具。
由于 store 中的狀態(tài)是響應(yīng)式的，在組件中調(diào)用 store 中的狀態(tài)簡單到僅需要在計算屬性中返回即可。觸發(fā)變化也僅僅是在組件的 methods 中提交 mutation。
到此這篇關(guān)于Vuex中Store的簡單實現(xiàn)的文章就介紹到這了,更多相關(guān)Vuex中的Store內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
搭建vue3項目以及按需引入element-ui框架組件全過程
element是基于vue.js框架開發(fā)的快速搭建前端的UI框架,下面這篇文章主要給大家介紹了關(guān)于搭建vue3項目以及按需引入element-ui框架組件的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
Vue實例的對象參數(shù)options的幾個常用選項詳解
今天小編就為大家分享一篇Vue實例的對象參數(shù)options的幾個常用選項詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vant中的toast層級改變操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了詳解如何在Vue里建立長按指令，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue+mousemove實現(xiàn)鼠標(biāo)拖動功能(拖動過快失效問題解決方法)
這篇文章主要介紹了vue+mousemove實現(xiàn)鼠標(biāo)拖動功能，文中給大家介紹了鼠標(biāo)移動過快拖動就失效問題的解決方法,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue中axios請求的封裝，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本文主要介紹了vue+element?分頁封裝的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
小編使用的是webpack模板在vue-cli生成的工程中引入jquery的方法，首先在package.json里的dependencies加入"jquery" : "^2.2.3"，然后install，具體內(nèi)容詳情大家參考下本文2018-01-01
在使用vue開發(fā)項目的時候,很多使用會import很多模塊,這篇文章主要給大家介紹了關(guān)于vue中import導(dǎo)入三種方式的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue分頁查詢怎么實現(xiàn)，使用vue實現(xiàn)分頁的邏輯并不復(fù)雜，接收后端傳輸過來的數(shù)據(jù)，然后根據(jù)數(shù)據(jù)的總數(shù)和每一頁的數(shù)據(jù)量就可以計算出一共可以分成幾頁2023-04-04