Vuex基本使用

Vuex的概念：
可以方便的實現組件之間數據的共享

Vuex的基本使用：

1.安裝vuex依賴包

npm install vuex  --save

2.導入vuex包

import Vuex from ‘vuex’

3.創建store對象

const store=new Vuex.Store({ //state中存放的就是全局共享的數據 state:{count:0} })

4.將store對象掛載到vue實例中

new Vue({
el:’#app’,
render:h=>h(app),
router, store //將所有的共享數據對象掛載到vue實例中
})

1.Vuex共享數據的好處：
1.能夠集中管理共享的數據，易於開發和後期維護
2.能夠高效地實現組件之間的數據共享，提高開發效率
3.存儲在vuex中的數據都是響應式的，能夠實時保持數據與頁面的同步

2.Vuex中的核心概念：
State
Mutation
Action
Getter
Module

3.組件訪問State中數據的方式：
1.從vuex中按需導入mapState函數

import {mapState} from 'vuex'

2.將全局數據，映射爲當前組件的計算屬性

computed:{
	...mapState(['count'])
}

3.在頁面中直接使用這個變量就行了

<h2>當前最新的count值是：{{ count}}</h2>

4.Mutation用於變更Store中的數據
1.通過mutation變更Store中的數據，

如果需要傳遞參數，在state後面接參數名字
在組件調用方法的時候傳遞

2…從vuex中按需導入mapMutations函數
import {mapMutations} from ‘vuex’

5.Action用於處理異步任務：
如果通過異步操作變更數據，必須通過Action,而不能使用Mutation,但是在Action中還是需要通過觸發Mutation的方式間接變更數據。
1.先定義actions函數