一、使用Vuex的目的
實現多組件狀態管理。多個組件之間需要數據共享時，Vuex是個很好的幫手哦
二、Vuex 的五大核心
其中state和mutation是必須的，其他可根據需求來加
1.state
負責狀態管理，類似于vue中的data，用于初始化數據
2.mutation
專用于修改state中的數據，通過commit觸發
3.action
可以處理異步，通過dispatch觸發，不能直接修改state，首先在組件中通過dispatch觸發action，然后在action函數內部commit觸發mutation，通過mutation修改state狀態值
4.getter
Vuex中的計算屬性，相當于vue中的computed,依賴于state狀態值，狀態值一旦改變，getter會重新計算，也就是說，當一個數據依賴于另一個數據發生變化時，就要使用getter
5.module
模塊化管理
三、Vuex 怎么用
1.首先當然要安裝啦 (假設你已經安裝了vue)
|
1
|
npm install vuex |
2.引入并使用Vuex
|
1
2
3
|
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex) |
3.實例化一個Vuex對象--Store狀態機 并拋出
|
1
2
3
|
const store = new Vuex.Store({})export defaul store |
4.在main.js中引入并注入Vuex
|
1
2
3
4
5
6
7
|
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.首先準備至少兩個組件，不然怎么數據共享呢
|
1
2
3
4
5
6
7
8
9
10
11
|
<template> <div> 我是組件1 </div></template><script> export default { } </script><style scoped></style> |
|
1
2
3
4
5
6
7
8
9
10
11
|
<template> <div> 我是組件2 </div></template><script> export default { } </script><style scoped></style> |
2.在store.js中寫Vuex相關代碼
|
1
2
3
4
5
6
7
8
9
10
11
|
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
|
1
2
3
4
5
6
7
|
···const store = new Vuex.Store({ state: { data:0 } })··· |
4.組件1和組件2都可以通過$store拿到data
|
1
2
3
4
|
<div>我是組件1{{this.$store.state.data}} //瀏覽器中此處會顯示data的值</div> |
|
1
2
3
4
|
<div>我是組件2{{this.$store.state.data}} //瀏覽器中此處會顯示data的值</div> |
5.那么怎么修改data呢，這時候就需要mutation出馬了
mutation實質是一個函數，接收state和調用時傳來的params參數
|
1
2
3
4
5
|
mutations: { changeDataMut(state,params){ state.data = params }} |
6.mutation有了，接下來就需要在組件中調用它,記得要用commit觸發
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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的參數
|
1
2
3
4
5
6
|
actions: { changeDataAct(context,params){ //context是一個對象，從它里面把咱們需要的commit方法解構出來 let {commit} = context commit('changeDataMut',params) }} |
這時候可以在組件中觸發action了，注意使用dispatch
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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發生改變
|
1
2
3
4
5
|
getters:{ doubleGet(state){ return state.data*2 }} |
- 我們可以在組件中使用它了
|
1
2
3
4
|
<div> 我是組件2 {{this.$store.getters.doubleGet}}</div> |
以上就是vuex的使用步驟的詳細內容，更多關于vuex 使用的資料請關注服務器之家其它相關文章！
原文鏈接：https://segmentfault.com/a/1190000038805329
