浅析集中式状态管理Vuex的使用方法

如何使用集中式状态管理的vuex？下面本篇文章就带大家了解一下vuex，简单聊聊vuex的使用方法，希望对大家有所帮助！

1.vuex是什么

一个专门在Vue中实现集中式状态管理的一个Vue插件,可以对vue应用中多个组件的共享状态进行集中式的管理(读取/写入)，也是一种组件间通信的方式，并且适用于任意组件间通信

2.什么时候使用Vuex

1.多个组件依赖于同一状态

2.来自不同组件的行为需要变更同一状态

2.1如何使用Vuex

首先我们要知道，如果使用了Vuex就大概率需要两个或者多个组件共享一套数据/状态，所以首先需要准备两个组件（分别为Count，Person），再就是我们要在src目录下添加一个store文件，因为Vuex就是依靠store来进行一系列的准备任务的

2.2Count组件

立即学习“前端免费学习笔记（深入）”；

在这个组件内我们可以看到map...一堆东西，这里我们就不得不说vuex里面的四个map了，如何使用map方法我放到了最后，这里我们只介绍一下该组件的功能Count是个有着“强大”计算功能的组件，它可以进行将最后的数进行放大10倍，可以奇数运算，可以延迟运算可谓是极其的“强大”

2.3Person组件

Person组件有着“强大”的人员添加的功能，他可以按照自己的意愿进行添加你的亲朋好友等

2.4引入组件

ShopWe 网店系统

1.修正会员卡升级会员级别的判定方式2.修正了订单换货状态用户管理中心订单不显示的问题3.完善后台积分设置数据格式验证方式4.优化前台分页程序5.解决综合模板找回密码提示错误问题6.优化商品支付模块程序7.重写优惠卷代码8.优惠卷使用方式改为1卡1号的方式9.优惠卷支持打印功能10.重新支付模块，所有支付方式支持自动对账11.去掉规格库存显示12.修正部分功能商品价格显示4个0的问题13.全新的支

下载

分别再App内引入这两个组件

2.5配置store文件夹下的index.js

要在store文件夹下面新建一个index.js文件，然后再index文件里面进行写入如下代码，首先是引入vue和vuex，再使用action进行动作响应，在这里我们可以接收到两个参数分别式context和value他们分别式上下文和所传入的值，我们可以再context身上发现我们所配置的state里面的所有东西,这就是context身上的东西，和value，这里value的值就是1

// 创建VUex种的store核心
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)
// 准备actions——用于组件内的动作响应
const actions = {
    // 奇数加法
    jiaodd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    // 延迟加
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit("JIA", value)
        }, 500);
    },
}
// 准备mutations——用于数据操作
const mutations = {
    JIA(state, value) {
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    },
    ADD_PERSON(state, value) {
        console.log('mustations种的ADD_PERSON被调用',state.personList);
        state.personList.unshift(value)
    }
}
// 准备state——用于数据的储存
const state = {
    sum: 0, // 当前和
    school: '山鱼小学',
    subject: '前端',
    personList:[{id:'001',name:'张三'}]
}
// 用于加工state种的数据
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
// 创建store并且暴露store
export default new Vuex.Store({
    // actions: actions,// 前后名称一样所以可以触发简写模式
    actions,
    mutations,
    state,
    getters
});

2.四个map方法的使用

1.mapState:用于帮助我们映射state中的数据为计算属性

computed: {
    // 使用mapState生成计算属性，从state种读取数据(...mapstate({})的意思是将其内的对象全部展开的计算属性里面)
    ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 对象写法
        
    // ...mapState(["sum", "school", "subject"]), // 数组写法
  }

2.mapGetters:用于帮助我们映射getters中的数据为计算属性

computed: {
    // 使用mapGetters生成计算属性，从getters种读取数据
    ...mapGetters({bigSum："bigSum"})
    ...mapGetters(["bigSum"])
  }

3.mapMutations:用于帮助我们生成与mutations交流的方法，包含$store.commit()的函数

methods: {
    // 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 对象式
    // ...mapMutations(["JIA", "JIAN"]), // 数组式(button的名字和vuex里面的名字必须统一)
  },

3.mapActions:用于帮助我们生成与mutations交流的方法，包含$store.commit()的函数

  methods: {
     // 借助mapActions生成对应的方法，方法种会调用相应的dispath去联系actions
    ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }), //对象式
    // ...mapActions(["jiaodd", "jiaWait"]) //数组式
  },

注:mapActions与mapMutations使用时，若需要传递参数需要在模板中绑定事件时传递好参数，否则参数是事件对象。

（学习视频分享：vuejs入门教程、编程基础视频）