vuex简单的store文件

最新推荐文章于 2024-09-01 10:41:27 发布

samfung09

最新推荐文章于 2024-09-01 10:41:27 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue vuex

本文链接：https://blog.youkuaiyun.com/samfung09/article/details/80655967

vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Vuex的工作流程：通过dispatch调用actions中的方法，actions再触发mutations更新state，实现状态管理。并提供了一个简单示例，展示了如何在store中设置登录状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

复习一下vuex工作流程，看图

如上图所示，vuex的工作流程大概是，组件this.$store.dispatch(store文件中的一个action函数名, 参数) 分发命令给action，actions接到命令再去触发mutation函数来修改state状态，最后反馈给视图层。

再来一份简单的store文件，暂时只写了登录状态

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 状态对象
let state = {
    isLogin: false
}

// 修改state的函数集合
let mutations = {
    LOGIN(state){
        state.isLogin = true;
    }
}

// 事件回调函数集合，收到外部传来命令然后触发mutation修改状态
let actions = {
    login({commit}){    // 组件中分发的事件回调
        commit('LOGIN');    // 触发mutations中的LOGIN函数
    }
}

// 计算属性集合
let getters = {

}

// 暴露store对象
export default new Vuex.Store({
    strict: true,   // 严格模式，强制使用mutation修改状态
    state,
    mutations,
    actions,
    getters
})

参考文章