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
第二步: