四、五 求和案例（vuex技术）

求和案例_纯vue版本

main.js

//引入vue
import Vue from "vue";
//引入组件App
import App from "./App.vue";

//关闭vue的生产提示
Vue.config.productionTip = false;

//创建vm
new Vue({
  el: "#app",
  render: (h) => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this; //设置全局事件总线
  },
});

App.vue

<template>
  <div>
    <count />
  </div>
</template>

<script>
import Count from "./components/Count.vue";
export default {
  components: { Count },
  name: "App",
};
</script>

components/Count.vue

<template>
  <div>
    <h1>当前求和为{
  { sum }}</h1>
    <select v-model.number="num">
      <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-sum",
  data() {
    return {
      num: 1, //用户选择的数
      sum: 0, //当前的和
    };
  },

  methods: {
    increment() {
      this.sum += this.num;
    },
    decrement() {
      this.sum -= this.num;
    },
    incrementOdd() {
      if (this.sum % 2) {
        this.sum += this.num;
      }
    },
    incrementWait() {
      setTimeout(() => {
        this.sum += this.num;
      }, 500);
    },
  },
};
</script>

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

求和案例_vuex版

main.js

//引入vue
import Vue from "vue";
//引入组件App
import App from "./App.vue";
//引入vue-rusource 用来发送ajax请求
import vueResource from "vue-resource";
//引入store 如果是容易认识的文件名 可以省略
//import store from "./store/index";
import store from "./store";

//关闭vue的生产提示
Vue.config.productionTip = false;
//使用插件
Vue.use(vueResource);

//创建vm
const vm = new Vue({
  el: "#app",
  render: (h) => h(App),
  store: store,
  beforeCreate() {
    Vue.prototype.$bus = this; //设置全局事件总线
  },
});
console.log(vm);

App.vue

<template>
  <div>
    <count />
  </div>
</template>

<script>
import Count from "./components/Count.vue";
export default {
  components: { Count },
  name: "App",
  mounted() {
    console.log("APP", this);
  },
};
</script>

store/index.js

//该文件用于创建Vuex中 最为核心的store

/* 
因为Vue 解析 main.js 的时候会先解析 引入内容（import）
而index这里面 new Store的时候 
用到了Vuex所以需要在该文件中使用插件 所以需要引入Vue
*/

//引入Vue
import Vue from "vue";
//引入Vuex插件
import Vuex from "vuex";
//使用vuex插件
Vue.use(Vuex);

//准备actions——用于响应组件中的动作
const actions = {
  /* context：操控上下文 用来提交  value：接收到的值*/
  /* jia(context, value) {
    console.log("actions中jia被调用了", context, value);
    context.commit("JIA", value);
  }, */

  /* jian(context, value) {
    console.log("actions中jian被调用了", context, value);
    context.commit("JIAN", value);
  }, */

  jiaOdd(context, value) {
    /* 使用上下文里的state 获取 当前数值 判断为基数再加 */
    if (context.state.sum % 2) {
      console.log("actions中jiaOdd被调用了", context, value);
      context.commit("JIA", value);
    }
  },

  jiaWait(context, value) {
    setTimeout(() => {
      console.log("actions中jiaWiat被调用了", context, value);
      context.commit("JIA", value);
    }, 500);
  },
};

//准备mutations——用于操作数据（state）
const mutations = {
  JIA(state, value) {
    console.log("mutations中jia被调用了", state, value);
    state.sum += value;
    /* state：初始定义的state 用来操作state里的数据  value：接收到的值*/
  },

  JIAN(state, value) {
    console.log("mutations中jian被调用了", state, value);
    state.sum -= value;
  },
};

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

//创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state,
});

components/Count.vue

<template>
  <div>
    <!-- 调用 store 里的 state 里的 sum值-->
    <h1>当前求和为{
  { $store.state.sum }}</h1>
    <select v-model.number="num">
      <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-sum",
  data() {
    return {
      num: 1, //用户选择的数
    };
  },

  methods: {
    increment() {
      /* 通过$store的 dispatch 传入要执行的操作（函数名），和要操作的值 联系actions执行对应的函数 */
      //this.$store.dispatch("jia", this.num);
      /* 这种不执行任何 任何业务的操作可以直接 通过 commit 联系 mutations 里的对应函数 */
      this.$store.commit("JIA", this.num);
    },
    decrement() {
      this.$store.commit("JIAN", this.num);
    },
    incrementOdd() {
      if (this.$store.state.sum % 2) {
        this.$store.dispatch("jiaOdd", this.num);
      }
    },
    incrementWait() {
      setTimeout(() => {
        this.$store.dispatch("jiaWait", this.num);
      }, 500);
    },
  },
};
</script>

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

求和案例_getters

main.js

//引入vue
import Vue from "vue";
//引入组件App
import App from "./App.vue";
//引入vue-rusource 用来发送ajax请求
import vueResource from "vue-resource";
//引入store 如果是容易认识的文件名 可以省略
//import store from "./store/index";
import store from "./store";

//关闭vue的生产提示
Vue.config.productionTip = false;
//使用插件
Vue.use(vueResource);

//创建vm
const vm = new Vue({
  el: "#app",
  render: (h) => h(App),
  store: store,
  beforeCreate() {
    Vue.prototype.$bus = this; //设置全局事件总线
  },
});
console.log(vm);

App.vue

<template>
  <div>
    <count />
  </div>
</template>

<script>
import Count from "./components/Count.vue";
export default {
  compo