什么情況下使用vuex
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),如果您不打算開(kāi)發(fā)大型單頁(yè)應(yīng)用,使用 Vuex 可能是繁瑣冗余的。如果您需要構(gòu)建是一個(gè)中大型單頁(yè)應(yīng)用,您很可能會(huì)考慮如何更好地在組件外部管理狀態(tài),Vuex 將會(huì)成為自然而然的選擇。
之前在做旅游頁(yè)的時(shí)候?qū)?Vuex 進(jìn)行了簡(jiǎn)單的了解。近期在做 Vue 項(xiàng)目的同時(shí)重新學(xué)習(xí)了 Vuex 。本篇博文主要總結(jié)一下 Vuex 單狀態(tài)庫(kù)和多模塊 modules 的兩類使用場(chǎng)景。
本篇所有代碼是基于 Vue-Cli 3.x 版本的腳手架工具進(jìn)行編寫(xiě)的。
vuex 單狀態(tài)庫(kù) Demo
這是一個(gè)僅有單個(gè) Vuex store 狀態(tài)庫(kù)的 Demo。當(dāng)項(xiàng)目中使用一個(gè) Vuex 狀態(tài)庫(kù)就已經(jīng)足夠的時(shí)候,可以使用這種方式。
本 Demo 使用了一個(gè) increment 與 decrement 的 增 / 減 事件來(lái)體現(xiàn) store 數(shù)據(jù)的變化。
store.js
由于狀態(tài)庫(kù)是單一的,僅有一個(gè) store.js 文件管理狀態(tài)庫(kù)。在該文件中一開(kāi)始進(jìn)行 import 的引入,然后使用 Vue.use(Vuex) 使用 Vuex,之后分別定義 state、mutations 和 actions,并通過(guò) export default new Vuex.Store({state, mutations, actions}) 模塊化。
// store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const mutations = { increment(state) { state.count ++ }, decrement(state) { state.count -- } } const actions = { increment:({commit}) => { commit('increment') }, decrement:({commit}) => { commit('decrement') } } export default new Vuex.Store({state, mutations, actions})
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
文章名稱:Vuex單狀態(tài)庫(kù)與多模塊狀態(tài)庫(kù)詳解-創(chuàng)新互聯(lián)
本文URL:http://jinyejixie.com/article48/ggdhp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、自適應(yīng)網(wǎng)站、網(wǎng)站策劃、移動(dòng)網(wǎng)站建設(shè)、商城網(wǎng)站、靜態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容