Vuex中的核心應用store 倉庫

2021-08-21 20:23:09 字數 1513 閱讀 6351

可以參考文件:

可以結合我之前發的部落格 vuex的配置使用，

在使用store的時候我們需要建立乙個store的file檔案，在裡面寫乙個js用來寄存他的讀取狀態

vuex中有5個核心概念 分別是 state,getters,mutations,acitons,module

​


import vue from 'vue'


import vuex from 'vuex'


vue.use(vuex);


const store = new vuex.store(,


getters:,


mutations:,


actions:,


module:


})​
store的具體使用流程

state單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在除錯的過程中也能輕易地取得整個當前應用狀態的快照。

import vue from 'vue'


import vuex from 'vuex'


vue.use(vuex);


const store = new vuex.store(,  


}})
getter用來在js頁面中讀取你要的狀態

import vue from 'vue'


import vuex from 'vuex'


vue.use(vuex);


const store = new vuex.store(,  


}  getter:


})
js頁面的讀取操作 (記得使用mapgetters 輔助函式對映區域性屬性) 具體看文件

import  from 'vuex' //mapgetters 輔助函式僅僅是將 store 中的 getter 對映到區域性計算屬性：


export default


if(this.gettestfile==null)


}}
更改 vuex 的 store 中的狀態的唯一方法是提交 mutation,在store中的配置

import vue from 'vue'


import vuex from 'vuex'


vue.use(vuex);


const store = new vuex.store(,  


},getter:,


mutations: 


settestlist(state,data) 


}})
在這裡我們需要對state賦值，所以單獨乙個js檔案用來寫入state狀態改變他的值

export default ,


data()]


}}
到這裡store的基本使用已經可以完

store檔案Vuex的使用

import vue from vue import vuex from vuex vue.use vuex 首先宣告乙個狀態 state const state 然後給 actions 註冊事件處理函式，當這個函式被觸發時，將狀態提交到 mutaions中處理 const actions comm...

store檔案Vuex的使用

import vue from vue import vuex from vuex vue.use vuex 首先宣告乙個狀態 state const state 然後給 actions 註冊事件處理函式，當這個函式被觸發時，將狀態提交到 mutaions中處理 const actions comm...

Vuex之Store的詳細用法

vuex就是提供乙個倉庫，store倉庫裡面放了很多物件。其中state就是資料來源存放地，對應於與一般vue物件裡面的data 後面講到的actions和mutations對應於methods 在使用vuex的時候通常會建立store例項new vuex.store 有很多子模組的時候還會使用到m...