vuex详解

vuex 概述

在 Vue 中，组件之间共享数据的方式有：

• 父组件向子组件传值：v-bind 属性绑定，例如： :data="products"
• 子组件向父组件传值：v-on 事件绑定，例如：@click="clickMe"
• 兄弟组件之间共享数据：EventBus 事件总线，例如：$emit 用于发送数据的组件，$on 用于接受数据的组件

以上三种方案只适合在小范围内实现数据共享，如果我们要频繁的或者说在大范围内实现数据共享，那么就需要用到 vuex 了。

Vuex是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间的数据共享。

画图

使用 Vuex 统一管理状态的好处

• 能够在 Vuex 中集中管理共享的数据，易于开发和后期维护
• 能够高效的实现组件之间的数据共享，提高开发效率
• 存储在 Vuex 中的数据都是响应式的，能够实时保持数据与页面的同步，即：若存储在 Vuex中的数据发生了变化，那么那些引用了全局的数据的组件也能够实时的进行页面刷新

一般情况下，只有组件之间共享的数据，才会必要存储到 vuex 中，对于组件中的私有数据，依旧存储在组件自身的 data 中即可。

Vuex的基本使用

1、安装依赖包

npm i vuex --save

或

yarn add vuex

2、在 store/index.js 中导入

import Vuex from "vuex";

Vue.use(Vuex);

3、创建store对象，在 store/index.js 中

export default new Vuex.Store({
   
  // state中存放的就是全局共享的数据
  state: {
    count: 100 },
  getters: {
   },
  mutations: {
   },
  actions: {
   },
  modules: {
   },
});

4、将store对象挂载到vue实例中，在 main.js 中

new Vue({
   
  router,
  // 将创建的共享数据对象，挂载到Vue实例中，所有的组件，就可以直接从store中获取全局的数据了
  store,
  render: (h) => h(App),
}).$mount("#app");

上述步骤其实在我们创建项目的时候就已经完成了，这里只需了解即可。

Vuex的核心概念

Vuex 中的主要核心概念如下：

• State
• Mutation
• Action
• Getter

State

在Vuex中，State提供唯一的公共数据源，所有共享的数据都要统一放到State中进行存储，例如这里的Store相当于一个用于存储数据的公共容器。

export default new Vuex.Store({
   
  state: {
    count: 100 },
  mutations: {
   },
  getters: {
   },
  actions: {
   },
  modules: {
   },
});

上述代码，我们存储了一个 count 变量，默认值 100，那么我们该如何访问到这个变量的值呢？

1、组件访问State中数据的第一种方式

# 格式：
this.$store.state.全局数据名称

# 示例：由于我们是在 html 元素中调用，则可以省略 this。在 HomeView.vue 中

<template>
  <div id="home">
    {
   {
    $store.state.count }}
  </div>
</template>

2、组件访问State中数据的第二种方式

通过mapState辅助函数的方式，将当前组件需要的全局数据，映射为computed 计算属性，在 HomeView.vue 中

<template>
  <div id="home">
    <!--直接在组件中获取属性-->
    {
  { count }}
  </div>
</template>

<script>
  import {
      mapState } from "vuex";
  export default {
     
    computed: {
     
      // ...表示展开映射，意思就是将全局属性映射为当前组件的计算属性
      ...mapState(["count"]),
    },
  };
</script>

Mutation

• 需求：我们需要让全局变量 count 的值加 1

1、原始方法，在 HomeView.vue 中，修改代码

<template>
  <div id="home">
    <h3>{
  { $store.state.count }}</h3>

    <button @click="incrementCount1">点我+1</button>
  </div>
</template>

<script>
export default {
     
  data() {
     
    return {
     };
  },
  methods: {
     
    incrementCount1() {
     
      this.$store.state.count++;