📖摘要
今天分享下 ——
Vue
系列:理解Vuex
的一些基本知識,歡迎關注!
當我們在項目中使用props來處理數據共享關係時,多層級的組件之間數據傳遞真的是很繁瑣,費勁且不易維護,vuex的出現,就可以完美幫我們解決這個問題。
🌂分享:幾個關鍵字段的含義
✨1. vuex
是什麼?
Vuex
是一個專爲 Vue.js
應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態。
白話:vuex
就是幫我們存儲一下多個組件共享的數據,方便我們對其讀取和更改。
✨2. State
官方解釋:Vuex
使用單一狀態樹,用一個對象就包含了全部的應用層次狀態。它便作爲一個唯一的數據源而存在。這也就意味着, 每個應用將僅僅包含一個 store
實例。
白話:組件中所要共享的數據,我們就會抽取一個 store
,而 state
即是我們可以共享的數據。
3. Mutations
更改 Vuex
的 store
中的狀態的唯一方法是提交 mutation
。
Vuex
中的 mutation
非常類似於事件:每個 mutation
都有一個字符串的事件類型和一個回調函數。
這個回調函數就是我們實際進行狀態更改的地方。並且它會接受 state
第一個參數。
白話:可以理解爲更改state的唯一途徑就是 mutation
(同步)
4. Actions
類似於 Mutation
,不同在於:
Action
提交的是mutation
,而不是直接更改狀態Action
可以包含任意一步操作
白話:Actions
也可以更改 state
,但是是通過 commit
,提交到 mutation
,不直接更改(異步)
5. Getters
Vuex
允許我們在 store
中定義 getter
(可以認爲是 store
的計算屬性)。
就像計算屬性 computed
一樣,getter
的返回值會根據它的依賴被緩存起來。
且只有當它的依賴值發生了改變纔會被重新計算。
6. mapState
是一個輔助函數,當一個組件需要獲取多個狀態時候,將這些狀態都聲明爲計算屬性會有些重複和冗餘。
爲了解決這個問題,我們可以使用 mapState
輔助函數幫助我們生成計算屬性。
白話:即幫我們獲取對應的 state
值
7. mapAction
是一個輔助函數,個人覺得比 dispatch
使用起來方便,主要是創建組件方法分發 action
,推薦使用。
🌂分享:實例
✨1. 安裝
npm install vuex --save
✨2. 目錄結構 (此項目使用是vue-admin-template腳手架)
用例鏈接:https://github.com/yzren/Vuex.git
- build
- node-modules
- public
- src
- api
- components
- layout
- components
- appMain.vue
- child.vue
- router
- store
- modules
- app.js (我們例子中寫vuex相關信息文件)
- index.js
- app.vue
- main.js
✨3. 簡單實例
- 在
store
文件夾下modules
文件夾下添加app.js
文件
const state = {
count: 1
}
const mutations = {
SET_ADD_COUNT: (state) => {
state.count++
},
SET_SUBTRACT_COUNT: (state) => {
state.count--
}
}
const actions = {
// 加
add({ commit }) {
commit('SET_ADD_COUNT')
},
// 減
subtract({ commit }) {
commit('SET_SUBTRACT_COUNT')
}
}
export default {
// namespaced: true,
state,
mutations,
actions
}
- 在
store
文件夾下新建index.js
文件,index
內容:
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app //封裝的存放state下count的方法
}
})
export default store
- 在
main.js
中引入store
文件
import store from './store'
...
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
- 具體到組件中使用,我們以
layout
內組件爲例子
AppMain.vue
<template>
<section class="app-main">
<h2>父親組件</h2>
<p>count計算結果 :
<strong>{{ count }}</strong>
</p>
<el-button size="small" @click="addFn">+</el-button>
<el-button size="small" @click="subtractFn">-</el-button>
<div>
<child />
</div>
</section>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import Child from './chind'
export default {
name: 'AppMain',
components: {
Child
},
computed: {
...mapState({
count: state => state.app.count
})
},
methods: {
...mapActions(['add', 'subtract']),
addFn() {
this.add()
},
subtractFn() {
this.subtract()
}
}
}
</script>
...
child.vue
<template>
<section class="app-main">
<h2>子組件</h2>
<p>count計算結果 :
<strong>{{ count }}</strong>
</p>
<el-button size="small" @click="addFn">+</el-button>
<el-button size="small" @click="subtractFn">-</el-button>
</section>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
name: 'Child',
computed: {
...mapState({
//引用count
count: state => state.app.count
})
},
methods: {
//分發action,即引入之後,就能通過【this.store中的方法名】,
//調用store內相對應的方法,
//此例調用的就是action的add和subtract方法
...mapActions(['add', 'subtract']),
addFn() {
this.add()
},
subtractFn() {
this.subtract()
}
}
}
</script>
...
✨4. 異步實例
主要展示 store
內文件相關代碼,其調用於以上簡單實力類似
//封裝的axios文件
import http from '@common/http';
//封裝的需要調用後端的接口文件
import { api } from '@common/config';
//共享的數據
const state = {
listData: {}
};
const actions = {
// 獲取
gitTestList({state, commit}, params) {
// 緩存已請求數據
if (state.listData[params.id]) {
return Promise.resolve(state.listData[params.id]);
}
return http.get(api.testApi, { params, notLoading: true }).then(res => {
commit('SET_TEST_LIST', res.data);
return res.data;
});
}
};
const mutations = {
//設置列表相應信息
SET_TEST_LIST(state, data) {
state.listData[data.id] = data;
}
};
export default {
state,
actions,
mutations
};
🎉最後
-
更多參考精彩博文請看這裏:《陳永佳的博客》
-
喜歡博主的小夥伴可以加個關注、點個贊哦,持續更新嘿嘿!