一、使用Vuex的目的
- 實現多組件狀態管理。多個組件之間需要數據共享時，Vuex是個很好的幫手哦
二、Vuex 的五大核心
- 其中state和mutation是必須的，其他可根據需求來加
- state
負責狀態管理，類似於vue中的data，用於初始化數據
- mutation
專用於修改state中的數據，通過commit觸發
- action
可以處理異步，通過dispatch觸發，不能直接修改state，首先在組件中通過dispatch觸發action，然后在action函數內部commit觸發mutation，通過mutation修改state狀態值
- getter
Vuex中的計算屬性，相當於vue中的computed,依賴於state狀態值，狀態值一旦改變，getter會重新計算，也就是說，當一個數據依賴於另一個數據發生變化時，就要使用getter
- module
模塊化管理
三、Vuex 怎么用
1.首先當然要安裝啦 (假設你已經安裝了vue)
npm install vuex
2.引入並使用Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3.實例化一個Vuex對象--Store狀態機 並拋出
const store = new Vuex.Store({})
export defaul store
4.在main.js中引入並注入Vuex
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
render: h => h(App),
store
}).$mount('#app')
5.通過this.$store訪問Vuex的數據
- 到此，Vuex已准備完成，接下來就根據自己需要加入數據吧~
四、示例代碼
1.首先准備至少兩個組件，不然怎么數據共享呢
<template>
<div>
我是組件1
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
<template>
<div>
我是組件2
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
2.在store.js中寫Vuex相關代碼
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {}, //狀態管理
mutations: {}, //修改state
actions: {}, //異步操作
getters:{}, //計算屬性
modules: {} //模塊
})
export default store
注：別忘了在main.js里注入store呀（參考上面第三大點的第4小點）
3.假設咱們現在需要共享一個數據data,初始值為0
···
const store = new Vuex.Store({
state: {
data:0
}
})
···
4.組件1和組件2都可以通過$store拿到data
<div>
我是組件1
{{this.$store.state.data}} //瀏覽器中此處會顯示data的值
</div>
<div>
我是組件2
{{this.$store.state.data}} //瀏覽器中此處會顯示data的值
</div>
5.那么怎么修改data呢，這時候就需要mutation出馬了
- mutation實質是一個函數，接收state和調用時傳來的params參數
mutations: {
changeDataMut(state,params){
state.data = params
}
}
6.mutation有了，接下來就需要在組件中調用它,記得要用commit觸發
<template>
<div>
我是組件1
<button @click='changeData'>改數據</button>
</div>
</template>
<script>
export default {
data(){
return {
changeData(){
// 通過commit 觸發 mutation 並傳參
this.$store.commit('changeDataMut',10) //此時組件1和組件2中data都是10啦
}
}
}
}
</script>
7.action怎么用？
- action也是函數。
- 前面已經說到，action不能直接修改state，首先要在組件中通過dispatch觸發action，然后在action函數內部commit觸發mutation，通過mutation修改state狀態值。
- 注意action的參數
actions: {
changeDataAct(context,params){ //context是一個對象，從它里面把咱們需要的commit方法解構出來
let {commit} = context
commit('changeDataMut',params)
}
}
這時候可以在組件中觸發action了，注意使用dispatch
<template>
<div>
我是組件2
<button @click='changeData'>改數據</button>
</div>
</template>
<script>
export default {
data(){
return {
changeData(){
// 通過dispatch 觸發 action 並傳參
this.$store.dispatch('changeDataAct',100)//此時data就變成100啦，並且組件1和組件2是同步的
}
}
}
}
</script>
8.getter的用法
- getter 計算屬性 ,依賴於state值，需要return
- 現在咱們假設一個值double，它是data的兩倍，並且會隨着data發生改變
getters:{
doubleGet(state){
return state.data*2
}
}
- 我們可以在組件中使用它了
<div>
我是組件2
{{this.$store.getters.doubleGet}}
</div>
謝謝光臨~
- 以上就是本次分享的全部內容啦，模塊module以及輔助函數mapstate等且聽下回分解~
--SunnySnowy