1、使用步驟
1.1 使用 npm 安裝 Vuex 安裝命令 cnpm install vuex -S
1.2 .src目錄下創(chuàng)建一個store的文件夾革骨,里面放一個index.js
1.3 實例化vuex實例對象
2.vuex的核心概念五個
1 至朗、state
組建中訪問state中數據的第一種方式
this.$store.state.全局數據名稱
2 組件中訪問state的第二種方法
1.從vuex中按需引入組件
import { mapState } from 'vuex'
2.將全局數據屉符,映射為當前組件的計算屬性
computed:{
//在頁面中 通過插值表達式顯示
...mapState([ 'count' ])
}
2.mutation(突變) 唯一能夠改變state中數據的東西使用
1.this$store.commit();
方法如下:一般在methods中使用
mutation按需引入同state
import { mapState, mapMutation } from 'vuex'
2.將全局數據,映射為當前組件的計算屬性
mothods:{
...mapMutation(['add','addn']),
//在方法中調用
btn(){
this.add();
}
}
3锹引、action 異步操作只能用action(引入方式同上)
在action中不能直接修改state中的數據矗钟,需要調用context.commit(),觸發(fā)mutation 的方法
4.getter類似computed,使用如下
核心內容的引入如圖:
5.module
將 store 分割成模塊(module)嫌变。每個模塊擁有自己的 state吨艇、mutation、action腾啥、getter东涡、甚至是嵌套子模塊
具體參考:vuex:https://vuex.vuejs.org/zh/guide/modules.html