Vue 之Vuex（状态管理模式）及其模块化

七彩冰淇淋与藕汤

已于 2022-04-09 14:51:32 修改

阅读量728

点赞数

文章标签： vue.js 前端 javascript

于 2021-11-17 19:02:54 首次发布

本文链接：https://blog.csdn.net/qq_36582776/article/details/121371318

版权

Vuex是Vue.js应用的状态管理工具，通过集中管理状态，简化大型项目中组件间的数据传递。本文介绍了Vuex的安装使用、核心概念（Actions、Mutations、Getters）、如何创建和引入Store，以及Store的模块化。通过实例展示了如何利用map方法简化组件中的状态获取和操作，同时解释了Commit与Dispatch的区别，强调了Mutation的同步性。

摘要由CSDN通过智能技术生成

VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

作者：怪兽难吃素
链接：https://www.jianshu.com/p/2e5973fe1223
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1.安装，使用

2.原理图

Actions用于与其他服务器交互，判断提交过来的操作的合理性，处理一些非数据操作的逻辑。（数据延时处理时的延时工作，判断条件再处理时的判断条件工作等）。这一步可以跳过。

Mutations用于进行真正的数据处理，可以看到底层的State，并且其行为被开发者工具监视。

创建store：

在src里面创建一个文件夹，名为store，文件夹里面创建index.js

index.js里面写store的逻辑：

//   store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const actions={
    jia(context,value){
        context.commit("JIA",value)
    },
    jian(context,value){
        context.commit("JIAN",value)
    },
    jiaOdd(context,value){
        if(state.sum%2){
            context.commit("JIA",value)
        }
    },
    jiaWait(context,value){
        setTimeout(()=>{
            context.commit("JIA",value)
        },1000)
    },
}
const mutations={
    JIA(state,value){
        state.sum+=value
    },
    JIAN(state,value){
        state.sum-=value
    },
}
const state={
    sum:0,
}

export default new Vuex.Store({
    actions,
    mutations,
    state,
})

使用Vue.use(Vuex)，那么所有的vc和vm都能使用store这一配置项了，store的引入跟$bus一样写在main.js里面

引入store：

import store from ‘./store’