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: '<App/>'

})

第三步：去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

第二步：