【Vue】vuex 求和案例

Vuex的基本使用：
1、初始化数据 state，配置actions、mutations，操作文件store.js
2、组件中读取 vuex 中的数据 $store.state.数据
3、组件中修改 vuex 中的数据 $store.dispatch('action中的方法名', 数据)
或 $store.commit('大写方法名', 数据)
若没有网络请求或其他业务逻辑，组件中也可越过actions，即不写dispatch，直接编写commit

案例注意点 vuex 的引入是在src/store/index.js 中

然后就是对于没有逻辑的方法, 就可以直接在组件方法调用 commit 去直接连接 mutations：this.$state.commit('大写方法名', 数据)

对那些需要逻辑判断定时器, 需要发送 ajax 请求的都需要在组件方法调用 dispatch 去连接 actions 在 actions 里面进行逻辑的判断和 ajax 请求的发送,：this.$state.dispatch('action中的方法名', 数据)。

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
 
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

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

//引入Vue核心库
import Vue from 'vue'
//引入 Vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)

//准备actions对象---响应组件中用户的动作
const actions = {
  conditionSum (context, value) {
    if (context.state.sum % 2 == 1) {
      context.commit('CONDITIONSUM', value)
    }
  },
  waitSum (context, value) {
    setTimeout(() => {
      context.commit('WAITSUM', value)
    }, 1000);
  }
}

//准备mutation对象---修改state中的数据
const mutations = {
  ADDSUM (state, value) {
    state.sum += value
  },
  SUBTRACTSUM (state, value) {
    state.sum -= value
  },
  CONDITIONSUM (state, value) {
    state.sum += value
  },
  WAITSUM (state, value) {
    state.sum += value
  }
}

//准备state对象---保存具体的数据
const state = {
  sum: 0
}

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

Count.vue

<template>
  <div>
    <h1>加减求和的值为{
   
   { $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="subtractSum">-</button>
    <button @click="conditionSum">和为奇数才能求和</button>
    <button @click="waitSum">等一秒才进行求和</button>
  </div>
</template>
 
<script>
export default {
  name: "Count",
  data() {
    return {
      number: 1,
    };
  },
  methods: {
    addSum() {
      this.$store.commit("ADDSUM", this.number);
    },
    subtractSum() {
      this.$store.commit("SUBTRACTSUM", this.number);
    },
    conditionSum() {
      this.$store.dispatch("conditionSum", this.number);
    },
    waitSum() {
      this.$store.dispatch("waitSum", this.number);
    },
  },
};
</script>
 
<style scoped>
button {
  margin-left: 5px;
}
</style>