Vue2.x中的Vuex

野槐

已于 2024-07-04 14:09:19 修改

阅读量1.8k

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

于 2022-12-23 14:28:46 首次发布

本文链接：https://blog.csdn.net/qq_44930306/article/details/128408437

版权

前端专栏收录该内容

45 篇文章 5 订阅

订阅专栏

2.2、mapState与mapGetters

2.3、mapActions与mapMutations

2.4、Vuex模块化+命名空间namespace

2.5、头插人员案例

一、vuex是什么

1.1、概念

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

1.2、Github地址

如下: https://github.com/vuejs/vuex

1.3、使用场景

多个组件依赖于同一状态
来自不同组件的行为需要变更同一状态

1.4、同胞传值

多组件共享数据----全局事件总线实现

代码实现

（1）在src包下的assets文件夹下创建js文件夹，并创建一个名为eventBus.js的文件，里面写入如下代码：

import Vue from 'vue'
export default new Vue();

（2）对于components文件夹下的兄弟组件：OneBar.vue(左)、TwoBar.vue(右)

1.5、Vuex工作原理

多组件共享数据-----vuex实现

【Vue components】相当于“客人”、【Actions】相当于“服务员”、【Mutations】相当于“后厨”、【State】相当于“菜”。

流程大概是客人---服务员---后厨---菜的关系。

1.6、搭建Vuex环境

注意：vue2中，要用vuex的3版本；vue3中，要用vuex的4版本。

我们目前用的vue2,所以要安装npm i vuex@3,然后在main.js中引入

二、求和案例

纯vue版本代码：

<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <h1>当前求和放大10倍为:{{ doubleShi }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="deincrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      n: 1, //用户选择的数字
      sum: 0, //当前的和
    };
  },
  computed: {
    doubleShi() {
      return this.$store.state.sum * 10;
    },
  },
  methods: {
    increment() {
      this.sum += this.n;
    },
    deincrement() {
      this.sum -= this.n;
    },
    incrementOdd() {
      if (this.sum % 2) {
        this.sum += this.n;
      }
    },
    incrementWait() {
      setTimeout(() => {
        // 函数体
        this.sum += this.n;
      }, 500);
    },
  },
};
</script>

vuex版本代码：

备注：红色为：mutations直接用法、绿色为：state用法、蓝色为：actions触发mutations用法

2.1、getters用法

备注：Vuex中的state相当于data、getters相当于computed

computed其实是对data属性值的加工，在html中的用法和data一样

2.2、mapState与mapGetters

如果Vuex中的state里面有很多属性，一个个获取很麻烦，那么我们借助mapState批量获取

而Vuex中的getters获取时，则可以借助mapState进行获取

2.3、mapActions与mapMutations

mapMutations用法：对象写法函数名不用变、数组写法函数名和数组名保持一致！

如果不想给button标签里的函数传参数的话，就如下所示：

mapActions用法：对象写法函数名不用变、数组写法函数名和数组名保持一致！

备注：

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

总结：

这4个方法在使用时要先引入

vuex中state中的值用computed获取;mutations以及actions里的方法都用methods获取

所以这就使得mapState与mapGetters写在computed里面，mapActions与mapMutations写在methods里面

总的来说，同一页面的多个组件传值，不想多次使用正向传值，就可以使用Vuex，而Vuex为了方便使用，也会借助namespaced:true命名不同的js文件存储数据。

2.4、Vuex模块化+命名空间namespace

也可以分开写，然后在store的index.js单独引入

2.5、头插人员案例

<template>
  <div>
    <h1>人员列表</h1>
    <input type="text" placeholder="输入名字" v-model="name" />
    <button @click="add">添加</button>
    <ul>
      <li v-for="p in pList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>
<script>
import { nanoid } from "nanoid";
export default {
  data() {
    return {
      name: "",
    };
  },
  computed: {
    pList() {
      return this.$store.state.personList;
    }
  },
  methods: {
    add() {
      const perObj = { id: nanoid(), name: this.name };
      this.$store.commit("Add_PERSON", perObj);
      this.name = "";
      // console.log(perObj);
    },
  },
};
</script>

Vuex的store中

  state: {
    personList:[
          {id:'001',name:'张三'}
    ]
  },
  mutations: {
    Add_PERSON(state,val){
      console.log('mutations中的Add_PERSON被调用了',state,val);
      state.personList.unshift(val)
     },
  },