Vue?(Vuex)中?store?基本用法
store是一個管理狀態(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ù))
接著我直接從一個國外的項目,部分代碼拷貝出來,進行詳細解讀。
首先這是一個組件,有個點擊click事件。
onAddRow (data) { const initVal = data.map((val, idx) => { return { colGrid: { span: val }, isCustom: 'btn-addCol' } }) this.addRow(initVal) },
接著調(diào)用了actions里的方法,該方法的寫法就很6,那個{}里的東西是由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源碼,就會發(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
我們可以看到這個方法已經(jīng)被編譯成了這個樣子,但是第一個參數(shù),擁有的屬性,就是上面源碼中的參數(shù)。
這個方法傳過來的值
接著,調(diào)用下面三個方法
上面的意思相當于
this.$store.commit('setDemoValue', value);
就會調(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 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
每一個 Vuex 應(yīng)用的核心就是 store(倉庫)。“store”基本上就是一個容器,它包含著你的應(yīng)用中大部分的狀態(tài) (state)。Vuex 和單純的全局對象有以下兩點不同:
Vuex 的狀態(tài)存儲是響應(yīng)式的。當 Vue 組件從 store 中讀取狀態(tài)的時候,若 store 中的狀態(tài)發(fā)生變化,那么相應(yīng)的組件也會相應(yīng)地得到高效更新。
你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化,從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
到此這篇關(guān)于Vue 中 store 基本用法的文章就介紹到這了,更多相關(guān)Vue store 用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue.js實現(xiàn)簡單ToDoList 前期準備(一)
這篇文章主要介紹了Vue.js實現(xiàn)簡單ToDoList的前期準備,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)1
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)的相關(guān)資料,允許采用簡潔的模板語法聲明式的將數(shù)據(jù)渲染進DOM,且數(shù)據(jù)與DOM綁定在一起,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南
WangEditor是一個開源的富文本編輯器,由阿里云開發(fā),它提供了一套簡潔易用的API和豐富的功能,如拖拽上傳圖片、插入表格、自定義表情等,適用于網(wǎng)頁和移動應(yīng)用中的內(nèi)容編輯場景,本文介紹了Vue使用wangeditor創(chuàng)建富文本編輯器的完整指南,需要的朋友可以參考下2024-08-08vue3+element?plus中利用el-menu如何實現(xiàn)路由跳轉(zhuǎn)
這篇文章主要給大家介紹了關(guān)于vue3+element?plus中利用el-menu如何實現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,在Vue?Router中我們可以使用el-menu組件來實現(xiàn)菜單導(dǎo)航,通過點擊菜單項來跳轉(zhuǎn)到不同的路由頁面,需要的朋友可以參考下2023-12-12vue中el-table多級嵌套列表(菜單使用el-switch代替)
本文主要介紹了el-table多級嵌套列表(菜單使用el-switch代替),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06Vuex如何獲取getter對象中的值(包括module中的getter)
這篇文章主要介紹了Vuex如何獲取getter對象中的值(包括module中的getter),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08