資料倉儲vuex的使用方法

2021-09-25 18:45:07 字數 1515 閱讀 1496

import vue from 'vue'

import vuex from 'vuex'

vue.use(vuex)

var store = new vuex.store(,

mutations: ,

getters:

})const vm = new vue()

使用vuex實現下面的功能:

步驟:1、在store中定義乙個count 來記錄輸入框中的數值

state: ,
2、第乙個子元件通過 this.$store.state.count 來訪問這個資料

3、第乙個元件實現增加+和減少-操作,

注意:如果要操作

store

中的state

值,只能通過

呼叫mutations

提供的方法,才能操作對應的資料,不推薦直接操作

state

中的資料,因為

萬一導致了資料的紊亂,不能快速定位到錯誤的原因,因為,每個元件都可能有運算元據的方法。

在store mutations 中進行+\-操作方法:

mutations: ,

subtract(state, obj)

},

4、在第乙個元件中通過 使用 this.$store.commit('方法名') 呼叫 mutations 方法,和 this.$emit('父元件中方法名')相似

5、有時候需要對資料做一層包裝, 這時候可以使用store 的getters,getters

只負責對外提供資料,不負責

修改資料,如果想要修改

state

中的資料,請

使用mutations,和filter類似

想在第二個元件中這樣顯示   '當前最新的count值是:' count值   

getters: 

}

6、第二個元件中使用store  中包裝之後的資料

總結:

1、如果元件想要直接從 state 上獲取資料: 需要 this.$store.state.屬性名

2、state中的資料,不能直接修改,如果想要修改,必須通過 mutations

3、元件通過 this.$store.commit('方法的名稱', 唯一的乙個引數) 來實現對 store 中 state 資料的操作

4、如果 store 中 state 上的資料, 在對外提供的時候,需要做一層包裝,那麼 ,推薦使用 getters, 如果需要使用 getters ,則用 this.$store.getters.方法名

Vuex使用方法(demo)

1 什麼是vuex?2 初始化vuexcnpm i vuex d 2 建乙個store資料夾 store index.js 初始化vuex import vue from vue import vuex from vuex 引入module vue.use vuex 生成乙個vuex例項 expor...

Vuex之getters的使用方法

getters其實就是store的計算屬性,對state裡面的狀態進行過濾處理,用法與元件自身的計算屬性一模一樣。在store資料夾下的index.js中 import vuex from vuex import vue from vue 1.安裝外掛程式 vue.use vuex const st...

資料倉儲(六) 資料倉儲的概念設計

在資料集市設計中可以使用3種基本的系統方法 資料驅動的方法 需求驅動的方法和混合方法。它們的區別在於源資料庫分析和終端使用者需求分析階段所佔的比重。方法的選擇將極大地影響概念設計的方式。資料驅動方法包括 基於實體 關係模式的設計 基於關係模式的設計 基於xml模式的設計。概念型實體 關係模式比關係型...