官網地址
準備工作:
a、main.js添加
import router from './store/index'
第 1 步
a、創建state.js、mutations.js、actions.js、getters.js、mutations-types.js以及modules目錄(存放組件.js)
b、index.js內引入并掛接
第 2 步
code.js內使用vuex四大核心書寫方法實現邏輯
第 3 步
Code.vue中引用vuex,并使用mapGetters,mapActions
概念解析
vuex主要邏輯:四大核心
state存儲數據
getters獲取數據
mutations修改數據(數據的修改只能通過mutation)
actions定義方法,觸發mutations
執行流程:頁面(
components
)通過dispatch
觸發actions
,actions
調用mutations
,mutations
通過getters
獲取數據并修改state
,state
響應到頁面(components
)
mapGetters與mapActions
a、四大核心都是注冊在vuex上的,可以有自己的命名空間
b、頁面使用直接引入vuex即可,使用mapGetters,mapActions調用c、mapGetters:獲取數據,在computed內使用,自動計算響應
d、mapActions:獲取方法,在methods內使用,頁面調用觸發