Vue 多元件資料共享Vuex及Vuex 模組化

多元件資料共享： vuex

我們知道每乙個元件都有自己的 data，那麼多個元件如何共享資料？這就引出了 state 的概念，可以把多個元件共有的屬性統一由state進行管理。但是元件並不能直接訪問或操作state裡的資料來源，而是通過 mutations 來對資料來源進行操作。而改變資料的行為觸發由 actions 來完成，vue 為 actions的觸發提供了乙個 commit 的概念，由action 觸發通過 mutations 對資料進行操作，從而改變 state 資料來源。

那麼 vue 的元件（components）如何操作 state 資料來源呢？components 通過滑鼠、鍵盤等互動行為觸發 (dispatch) vuex 的actions，actions 對操作進行提交，找到對應的 mutations，進而對 state進行改變。這就是 vuex 的完整資料流。上**：

首先，安裝 vuex

npm i vuex

新建 store.js

touch src/store.js

vue中可以存放資料的有元件的 data、computed、props，而state就是放在 computed裡。

// store.js
import vue from 'vue' //引入 vue
import vuex from 'vuex' // 引入vuex
vue.use(vuex) // 將vue 的全域性元件 vuex 加入到 vue 的執行框架中
const state = 
const mutations = ,
decrement(state) 
}// actions 不能直接修改資料， 它會接收 vue 元件的使用者行為，進一步觸發（commit）操作，由mutations 對資料來源state進行修改。補充說明：commit 攜帶乙個引數，這個引數就是 mutations 裡的某乙個行為，這個行為會對資料來源state進行操作，並使vue元件重新render資料變化
const actions = ) => ,
decrement: () => 
}// 匯出 vuex 的例項
export default new vuex.store()

專案入口檔案：

import vue from 'vue'
import store from './store' // 引入 store 檔案
vue.config.productiontip = false
new vue(}
增加刪減

延伸：vuex 模組化先建立好模組目錄及模組檔案

mkdir src/store // 建立 store 目錄 mkdir src/store/modules // 建立store 模組目錄 touch src/store/modules/a.js // 建立 a 模組 touch src/store/modules/b.js // 建立 b 模組 touch src/store/index.js // 建立 store 模組入口檔案 touch src/components/a.vue // 建立子元件a touch src/components/b.vue // 建立子元件b

// a.js
const state = 
const mutations = ,
reduce(state) 
}const actions = ) => ,
reduce: () => 
}export default

// b.js
const state = 
const mutations = ,
reduce(state) 
}const actions = , param) => ,
reduce: () => 
}export default

// index.js store 入口檔案
import vue from 'vue'    // 引入 vue
import vuex from 'vuex'   // 引入 vuex
import money from './modules/a'   // 引入模組a
import count from './modules/b'   // 引入模組b
vue.use(vuex)   // 引入vue的全域性模組 vuex
export default new vuex.store(
})

// a.vue
page a}
新增刪減

// b.vue
page b}
新增刪減

// 專案主入口檔案 main.js
import vue from 'vue'
import store from './store/index' // 引入 store 模組入口檔案
vue.config.productiontip = false
new vue({
store // 把vuex的例項引入vue例項中

Vue 多元件資料共享Vuex及Vuex 模組化

vue元件資料傳遞

Vue父元件獲取子元件資料

Vue 中子元件訪問父元件資料

Vue 多元件資料共享Vuex及Vuex 模組化

vue元件資料傳遞

Vue父元件獲取子元件資料

Vue 中子元件訪問父元件資料

相關推薦