我们在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次+,开发者工具会将行为记录下来:
如果我们点击事件,还会出现本次事件的数据变化情况: