亲宝软件园·资讯

展开

Vue项目运用vuex Vue项目中怎样运用vuex的实战记录

青莲使者 人气:1
想了解Vue项目中怎样运用vuex的实战记录的相关内容吗,青莲使者在本文为您仔细讲解Vue项目运用vuex的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue项目实例,vue运用vuex,vue使用,下面大家一起来学习吧。

Vuex 是什么?

TIP 👉 官网解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

当我们多个页面需要共享数据时就可以使用Vuex。比如:

Vuex 背后的基本思想,借鉴了 Flux、Redux。与其他模式不同的是,Vuex 是专门为 Vue 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

vuex使用周期图

我的store目录

实现一个vuex的示例

让我们创建这几个文件

action-types.js

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

mutation-types.js

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

在modules下面创建一个base.js文件

base.js

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
}

index.js

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

Vue.use(Vuex);

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

Header.vue

<span>{{$store.getters.userInfo.name}}</span>

main.js

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')
})

总结

加载全部内容

相关教程
猜你喜欢
用户评论