630_vuex简介

概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//使用Vuex

//准备actions用于响应组件里面的动作
const actions = {
    // jia: function (context, value) {
    //     context.commit('JIA', value)
    // },
    jian(context, value) {
        context.commit('JIAN', value)
    },
    jiaOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit('JIA', value)
            // this.sum += this.n;
        }, 500);
    }

    // this.$store.dispatch("jia", this.n);
}

//准备mutations用于操作数据
const mutations = {
    JIA(state, value) {
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    },

}

//准备state用于存储数据
const state = {
    sum: 0, //当前的和
}

const store = new Vuex.Store({
    actions,
    mutations,
    state
})

export default store

Count.vue

<template>
  <div>
    <h1>当前求和为:{{ $store.state.sum }}</h1>
    <select v-model="n">
      <!-- value默认是字符串类型，加上":"后 所有冒号里面的内容变成js表达式来解析-->
      <!-- 或者使用 v-model.number="n" 强制类型转换-->
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1, //用户选择的数字
    };
  },
  methods: {
    //VueComponent可以直接向mutations提交数据，不经过actions
    increment() {
      this.$store.commit("JIA", this.n);
      // this.sum += this.n;
    },
    decrement() {
      this.$store.dispatch("jian", this.n);
      // this.sum -= this.n;
    },
    incrementOdd() {
      // if (this.sum % 2) {
      //   this.sum += this.n;
      // }
      this.$store.dispatch("jiaOdd", this.n);
    },
    incrementWait() {
      this.$store.dispatch("jiaWait", this.n);
    },
  },
};
</script>

<style>
button {
  margin-left: 5px;
}
</style>