vuex基础用法流程(actions,mutations)

vuex基础用法流程

在store文件夹中新建“index.js”、“action.js”、“mutations.js”

1. index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'

Vue.use(Vuex)
//此处定义state变量
const state = {
    userName:'',    //登录用户名
}

export default new Vuex.Store({
    //全局变量
    state ,
    mutations ,
    actions,
})

2. actions.js

/**
 * Vuex-actions
 */
export default {
    /** 
     * 登录界面——保存用户名
    */
    saveUserName(context,userName){
        context.commit('saveUserName',userName);	//用commit命令
    }
}

3.mutations.js

/**
 * Vuex-mutations
 */
export default {
    /** 
     * 登录界面——保存用户名
     */
    saveUserName(state, userName) {
        state.userName = userName
    }
}

4.vue中调用

从后端获取userName并设置state

this.$store.dispatch('saveUserName', res.data.userName)

google浏览器插件vue查看：

在data或其他地方调用：

userName: this.$store.state.userName