Vue项目中如何运用vuex的实战记录

目录

• Vuex 是什么？
• vuex使用周期图
• 我的store目录
• 实现一个vuex的示例
• 总结

// 获取用户信息
export const QUERY_USER_INFO = "QUERY_USER_INFO"

// 设置用户信息
export const SET_USER_INFO = "SET_USER_INFO"

import { QUERY_USER_INFO } from "../action-types"
import { SET_USER_INFO, SET_CUR_MENU_ID } from "../mutation-types"
import api from "@/assets/js/api.js"

// 创建state
const state = {
    // 用户信息
    userInfo: {},
}

// 异步获取数据，commit给mutations，mutations改变state
const actiOns= {
    /* 获取用户信息 */
    [QUERY_USER_INFO] ({ commit }, params) {
        return api.get({
                url: "/system/getUser",
            }, params.vm).then(data => {
                commit(SET_USER_INFO, data)
                return data
        })

    }

}

const getters = {
    // 当前用户信息
    userInfo: state => state.userInfo
}

// 同步获取
const mutatiOns= {
    [SET_USER_INFO] (state, data) {
        state.userInfo = data
    }
}


export default {
    state,
    actions,
    getters,
    mutations
}

mport Vue from "vue"
import Vuex from "vuex"
import base from "./modules/base.js"

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        base
    }
})

{{$store.getters.userInfo.name}}

import Vue from "vue"
import store from "./store"
import { QUERY_USER_INFO } from "@/store/action-types.js"

store.dispatch(QUERY_USER_INFO, {}).finally(() => {
    new Vue({
        router: router(store),
        store,
        render: h => h(App)
    }).$mount("#app")
})