VueX的基本使用

我们在store文件下将index.js文件基本的配置配置完成过后就可以进行正式的使用了。

不知道初始化步骤可以看这篇文章：VueX环境的搭建-CSDN博客

import Vuex from 'vuex';
import Vue from 'vue';
 
Vue.use(Vuex);
 
const actions = {};
 
const mutations = {};
 
const state = {};
 
export default new Vuex.Store({
    actions,
    mutations,
    state
})

我们现在要实现以下场景：

在VueX中有一个值sum，在组件中可以进行自定义加减的操作。

先配置好组件中的代码：

<template>
  <div>
    <!-- {{ }} 中填入VueX中的数据 -->
    <h1>sum的值为:{{  }}</h1>
    <select v-model="number">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="addSum">+</button>
    <button @click="downSum">-</button>
  </div>
</template>
  
<script>
export default {
  name: "MyItem",
  data() {
    return {
      number: 1,
    };
  },
  methods: {
    addSum() {
        // 调用store中的方法
    },
    downSum() {
    // 调用store中的方法
    },
  },
};
</script>

一、配置State

state对象中，我们用于存储数据：

const state = {
    sum:0
};

二、配置Actions

Actions对象中用于配置行为名称，以及配置commit函数。

const actions = {

        actions中的方法名称 (content, value) {

                // 额外操作

                commit ("mutations中的方法名称", value);

        }

}

1. Action对象中的配置能接受到两个参数，一个是content，这里面包含着许多store中的对象和方法。

2. 第二个参数value是从组件中传递过来的数据， 可以不配置也可以配置多个。

3. commit方法也有两个参数 : 一个是mutations中的方法名称，一个是组件中传入的数据，可以没有也可以多个。

const actions = {
    // 调用加
    add(content, value) {
        content.commit("ADD", value);
    },
    // 调用减
    down(content, value) {
        content.commit("DOWN", value);
    }
};

三、配置Mutations

Mutation对象中用于存放具体的代码实现：

const mutations = {

        mutations方法名称 (state, value) { 

                // 具体实现

        }

}

state就是存放的数据，value是组件传递过来的数据。 

const mutations = {
    // 加
    ADD(state, value) {
        state.sum += value;
    },
    // 减
    DOWN(state, value) {
        state.sum -= value;
    }
};

四、调用

我们配置完成后就可以在组件中读取和调用。

组件中读取数据：

$store.state.数据名

调用方法：

this.$store.dispatch ("actions中的事件名", value)    // 调用actions中的方法

this.$store.commit ("mutaions中的事件名", value)    // 跳过actions，直接调用mutations中的方法

<template>
  <div>
    <!-- 读取VueX中的sum数据 -->
    <h1>sum的值为:{{ $store.state.sum }}</h1>
    <select v-model="number">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="addSum">+</button>
    <button @click="downSum">-</button>
  </div>
</template>
  
<script>
export default {
  name: "MyItem",
  data() {
    return {
      number: 1,
    };
  },
  methods: {
    // 调用VueX中的+方法
    addSum() {
      this.$store.dispatch("add", this.number);
    },
    // 调用VueX中的-方法
    downSum() {
      this.$store.commit("DOWM", this.number);
    },
  },
};
</script>

五、开发者工具的使用

如果我们成功配置了VueX的开发环境，那我们就可以在控制台的Vue开发者工具中找到VueX开发者工具。

（一）打开

打开默认显示的是我们是数据部分。

VueX开发者工具中最重要的就是TimeLine，新版在如下位置：

老版本在如下位置： 

（二）设置

可以点击右上角的按钮指定显示内容：

（三）使用

 我们点击3次+，开发者工具会将行为记录下来：

如果我们点击事件，还会出现本次事件的数据变化情况：