Vuex中Store的簡(jiǎn)單實(shí)現(xiàn)
Vuex中Store的簡(jiǎn)單實(shí)現(xiàn)
安裝 Vuex 之后，讓我們來(lái)創(chuàng)建一個(gè) store。
創(chuàng)建過(guò)程直截了當(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++
}
}
})
通過(guò) store.state 來(lái)獲取狀態(tài)對(duì)象，以及通過(guò) store.commit 方法觸發(fā)狀態(tài)變更：
store.commit('add')
console.log('store.state.count:' + store.state.count) // -> store.state.count:1
為了在 Vue 組件中訪問(wèn) 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 中定義的變量，而不是直接修改
- 我們通過(guò)提交 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)文章
搭建vue3項(xiàng)目以及按需引入element-ui框架組件全過(guò)程
element是基于vue.js框架開(kāi)發(fā)的快速搭建前端的UI框架,下面這篇文章主要給大家介紹了關(guān)于搭建vue3項(xiàng)目以及按需引入element-ui框架組件的相關(guān)資料,文中通過(guò)圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
Vue實(shí)例的對(duì)象參數(shù)options的幾個(gè)常用選項(xiàng)詳解
今天小編就為大家分享一篇Vue實(shí)例的對(duì)象參數(shù)options的幾個(gè)常用選項(xiàng)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了vant中的toast層級(jí)改變操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了詳解如何在Vue里建立長(zhǎng)按指令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue+mousemove實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能(拖動(dòng)過(guò)快失效問(wèn)題解決方法)
這篇文章主要介紹了vue+mousemove實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能，文中給大家介紹了鼠標(biāo)移動(dòng)過(guò)快拖動(dòng)就失效問(wèn)題的解決方法,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue中axios請(qǐng)求的封裝，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue+element?分頁(yè)封裝的實(shí)現(xiàn)示例
本文主要介紹了vue+element?分頁(yè)封裝的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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開(kāi)發(fā)項(xiàng)目的時(shí)候,很多使用會(huì)import很多模塊,這篇文章主要給大家介紹了關(guān)于vue中import導(dǎo)入三種方式的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue分頁(yè)查詢?cè)趺磳?shí)現(xiàn)，使用vue實(shí)現(xiàn)分頁(yè)的邏輯并不復(fù)雜，接收后端傳輸過(guò)來(lái)的數(shù)據(jù)，然后根據(jù)數(shù)據(jù)的總數(shù)和每一頁(yè)的數(shù)據(jù)量就可以計(jì)算出一共可以分成幾頁(yè)2023-04-04