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和四個屬性
延伸:modules: 子產品化Vuex
第四步:去state.js定義變量,類似data
第五步:去mutations裡寫同步方法setToken,第一個參數state,第二個參數是要傳進來的值
第五步:去sactions.j裡定義異步方法bb,第一個參數是{commit},第二個參數是要傳進來的值,action裡的方法通過commit方法修改mutations的值(commit修改的是mutation同步方法)--- 除了vuex,外部檔案想調用異步方法commit
第六步:想修改值,除vuex外部檔案用store.dispatch去觸發actions.js的bb方法(dispatch觸發的是action裡的異步方法)---除了vuex,外部檔案想調用異步方法dispatch
第七步:在vue檔案裡想擷取token的值
總結:commit觸發同步方法(mutations),dispatch觸發異步方法(actions)
2.簡單的使用場景一:先寫一個登入頁:點選送出時,修改vuex中state裡的userInfo,然後列印擷取?
步驟一:先寫登入頁loginPage.vue,寫送出的點選事件getinputval
步驟二:先去state.js定義userInfo
步驟三:去mutations.js裡定義setUserInfo
步驟四:去action.js裡定義setUser方法(用commit讓mutations裡的方法可以異步調用)
步驟五:再回到loginPage.vue,因為在外部檔案,用store.dispatch去觸發action裡的方法,第二個參數是要傳過去的值
我們把store.state.userInfo.userName值改了之後,在列印看下,是否真的改了
場景二:怎麼用getter寫,怎麼了解從基礎資料擷取派生資料?
第一步:在getters.js設定getUserName
第二步: