【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>

直接运行当然报错, 因为还要去 index.js 上进行定义 actions

输出两个参数

发现 b 就是我们要加的值, 就是组件中的 this.n

而 a 就是我们希望的一个迷你版的 store 里面有我们想用的 api

然后我们试试调用下 commit

发现这样写报错, 因为 mutation 里面也要有 jia 这个方法

然后我们写入 mutation，注意一般把 mutation 里面的方法写成大写，好区分

然后输出 a，b

发现 a 就是 state, 而 b 就是 actions 传过来的 value

而且这个 state 相当于一个对象还有着 get set 数据的监听

然后就是组件里去读取到这个 state

发现是在 this.$store.state.sum

模板上不需要写 this

实现减

store.index.js

组件

然后实现奇数相加和等一等再加

判断是写在组件里的

把判断写在 src/store/index.js 里面的 actions 里面

​​​注意在 mutation 里面千万不要写任何的逻辑, 也不要发送 Ajax 请求, 定时器也不要写, 这些全写在 actions 里面

然后会发现

这边 actions 的加减貌似没什么作用没有什么逻辑判断, 没有存在的意义

然后注掉之后

之前说过可以在组件中直接调 commit 去联系 mutation

然后因为调用 dispatch 是去联系 actions, 而调用 commit 是去联系 mutations 所以这边方法名要大写