store文件夹下创建index.js
import Vuex from 'vuex';
import Vue from 'vue';
Vue.use(Vuex);
export default new Vuex.Store({
//接受用户的事件
actions: {
add(context, value) {
context.commit('ADD', value);
},
reduce(context, value) {
setTimeout(() => {
context.commit('REDUCE', value);
}, 1000);
},
},
//操作state中的数据
mutations: {
ADD(state, value) {
state.count += value;
},
REDUCE(state, value) {
state.count -= value;
},
XIAJIA(state) {
state.list.pop();
}
},
state: {
count: 0,
list: [{ name: "html" }, { name: "csss" }, { name: "java" }]
},
getters: {
changeCount(state) {
return state.count * 2;
}
}
});
页面显示
<template>
<div>
<h1>当前的计数:{{ $store.state.count }}</h1>
<h1>getters加工后的数据{{ $store.getters.changeCount }}</h1>
<button @click="add()">增加</button>
<button @click="reduce()">减少</button>
<h1>当前课程的个数:{{ $store.state.list.length }}</h1>
<ul>
<li v-for="(i, index) in $store.state.list" :key="index">{{ i.name }}</li>
</ul>
<button @click="xiajia()">下架</button>
</div>
</template>
方法调用
// 方法集合
methods: {
// 累加
add() {
this.$store.commit("ADD", this.sum); //同步操作
// this.$store.dispatch("add", this.sum); //异步操作
},
// 累减
reduce() {
this.$store.commit("REDUCE", this.sum); //同步操作
// this.$store.dispatch("reduce", this.sum); //异步操作
},
xiajia() {
this.$store.commit("XIAJIA");
},
},