新手笔记-Vuex store练习

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");
    },
  },