天天看點

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

1.vuex使用的固定流程?

第一步:安裝vuex:npm install vuex --save

第二步:在main.js

import store from './vuex/store.js'

window.store = store//定義全局store,如果不全局定義就用this.$strore

new Vue({

el: '#app',

router,

store,

components: { App },

template: ''

})

第三步:去vuex找store.js,引入vuex和四個屬性

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

延伸:modules: 子產品化Vuex

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

第四步:去state.js定義變量,類似data

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

第五步:去mutations裡寫同步方法setToken,第一個參數state,第二個參數是要傳進來的值

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

第五步:去sactions.j裡定義異步方法bb,第一個參數是{commit},第二個參數是要傳進來的值,action裡的方法通過commit方法修改mutations的值(commit修改的是mutation同步方法)--- 除了vuex,外部檔案想調用異步方法commit

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

第六步:想修改值,除vuex外部檔案用store.dispatch去觸發actions.js的bb方法(dispatch觸發的是action裡的異步方法)---除了vuex,外部檔案想調用異步方法dispatch

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

第七步:在vue檔案裡想擷取token的值

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

總結:commit觸發同步方法(mutations),dispatch觸發異步方法(actions)

2.簡單的使用場景一:先寫一個登入頁:點選送出時,修改vuex中state裡的userInfo,然後列印擷取?

步驟一:先寫登入頁loginPage.vue,寫送出的點選事件getinputval

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

步驟二:先去state.js定義userInfo

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

步驟三:去mutations.js裡定義setUserInfo

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

步驟四:去action.js裡定義setUser方法(用commit讓mutations裡的方法可以異步調用)

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

步驟五:再回到loginPage.vue,因為在外部檔案,用store.dispatch去觸發action裡的方法,第二個參數是要傳過去的值

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

我們把store.state.userInfo.userName值改了之後,在列印看下,是否真的改了

場景二:怎麼用getter寫,怎麼了解從基礎資料擷取派生資料?

第一步:在getters.js設定getUserName

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼

第二步:

vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼
vuex mutations_0506整理的vuex使用的固定流程和簡單的使用場景代碼