Vue?(Vuex)中?store?基本用法
store是一個(gè)管理狀態(tài),在vuex中使用。
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { //這里放全局參數(shù) }, mutations: { //這里是set方法 }, getters: { //這里是get方法,并且每次打開瀏覽器優(yōu)先執(zhí)行該方法,獲取所有的狀態(tài) }, actions: { // 處理state的方法體 }, modules: { //這里是我自己理解的是為了給全局變量分組,所以需要寫提前聲明其他store文件,然后引入這里 } })
store的執(zhí)行順序:
打開瀏覽器 → getters → 組件調(diào)用actions中的方法 → mutations(設(shè)置state的值) → getters(更新數(shù)據(jù))
接著我直接從一個(gè)國外的項(xiàng)目,部分代碼拷貝出來,進(jìn)行詳細(xì)解讀。
首先這是一個(gè)組件,有個(gè)點(diǎn)擊click事件。
onAddRow (data) { const initVal = data.map((val, idx) => { return { colGrid: { span: val }, isCustom: 'btn-addCol' } }) this.addRow(initVal) },
接著調(diào)用了actions里的方法,該方法的寫法就很6,那個(gè){}里的東西是由Vuex提供的,只是將Store里的數(shù)據(jù)提了出來
addRow ({ commit, state }, reload) { let { layoutSections } = state let _idx = layoutSections.length let _newLaypout = [...layoutSections, reload] // 調(diào)用set方法,set全局的state commit(types.UPDATE_LAYOUT_SECTIONS, _newLaypout) commit(types.UPDATE_ACTIVE_SECTION, _idx) commit(types.UPDATE_ACTIVE_PROP, '') },
我們直接看Store源碼,就會(huì)發(fā)現(xiàn):
function registerAction (store, type, handler, local) { const entry = store._actions[type] || (store._actions[type] = []); entry.push(function wrappedActionHandler (payload, cb) { // 這里就是主要的參數(shù),我們?nèi)绻胍褂?,就可以在{}里聲明它 let res = handler.call(store, { dispatch: local.dispatch, commit: local.commit, getters: local.getters, state: local.state, rootGetters: store.getters, rootState: store.state }, payload, cb); if (!isPromise(res)) { res = Promise.resolve(res); } if (store._devtoolHook) { return res.catch(err => { store._devtoolHook.emit('vuex:error', err); throw err }) } else { return res } }); }
通過debug
我們可以看到這個(gè)方法已經(jīng)被編譯成了這個(gè)樣子,但是第一個(gè)參數(shù),擁有的屬性,就是上面源碼中的參數(shù)。
這個(gè)方法傳過來的值
接著,調(diào)用下面三個(gè)方法
上面的意思相當(dāng)于
this.$store.commit('setDemoValue', value);
就會(huì)調(diào)用mutations的set方法
[types.UPDATE_LAYOUT_SECTIONS] (state, load) { state.layoutSections = load }, [types.UPDATE_ACTIVE_SECTION] (state, load) { state.activeSection = load }, [types.UPDATE_ACTIVE_PROP] (state, load) { state.activeProp = load },
調(diào)用完成后,執(zhí)行g(shù)etters更新狀態(tài)
activeRow (state) { debugger let { layoutSections, activeSection } = state return layoutSections[activeSection] || [] }
小結(jié)
vue里store的用法是什么
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
每一個(gè) Vuex 應(yīng)用的核心就是 store(倉庫)。“store”基本上就是一個(gè)容器,它包含著你的應(yīng)用中大部分的狀態(tài) (state)。Vuex 和單純的全局對(duì)象有以下兩點(diǎn)不同:
Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候,若 store 中的狀態(tài)發(fā)生變化,那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。
你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化,從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
到此這篇關(guān)于Vue 中 store 基本用法的文章就介紹到這了,更多相關(guān)Vue store 用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue.js實(shí)現(xiàn)簡單ToDoList 前期準(zhǔn)備(一)
這篇文章主要介紹了Vue.js實(shí)現(xiàn)簡單ToDoList的前期準(zhǔn)備,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)1
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料,允許采用簡潔的模板語法聲明式的將數(shù)據(jù)渲染進(jìn)DOM,且數(shù)據(jù)與DOM綁定在一起,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01vue組件實(shí)現(xiàn)文字居中對(duì)齊的方法
這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)文字居中對(duì)齊的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南
WangEditor是一個(gè)開源的富文本編輯器,由阿里云開發(fā),它提供了一套簡潔易用的API和豐富的功能,如拖拽上傳圖片、插入表格、自定義表情等,適用于網(wǎng)頁和移動(dòng)應(yīng)用中的內(nèi)容編輯場景,本文介紹了Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南,需要的朋友可以參考下2024-08-08vue3+element?plus中利用el-menu如何實(shí)現(xiàn)路由跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于vue3+element?plus中利用el-menu如何實(shí)現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,在Vue?Router中我們可以使用el-menu組件來實(shí)現(xiàn)菜單導(dǎo)航,通過點(diǎn)擊菜單項(xiàng)來跳轉(zhuǎn)到不同的路由頁面,需要的朋友可以參考下2023-12-12vue中el-table多級(jí)嵌套列表(菜單使用el-switch代替)
本文主要介紹了el-table多級(jí)嵌套列表(菜單使用el-switch代替),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06Vuex如何獲取getter對(duì)象中的值(包括module中的getter)
這篇文章主要介紹了Vuex如何獲取getter對(duì)象中的值(包括module中的getter),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08