天天看点

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使用的固定流程和简单的使用场景代码