[Vue] vuex summation case

Basic use of Vuex:
1. Initialize data state , configure actions , mutations , operate file store.js 2. Read data $store.state.data
in vuex in components 3. Modify data $store.dispatch in vuex in components ('method name in action', data) or $store.commit('uppercase method name', data) If there is no network request or other business logic, actions can also be skipped in the component , that is , write commit directly instead of dispatch

Case Notes The introduction of vuex is in src /store/index.js

Then, for methods without logic , you can call commit directly in the component method to directly connect mutations: this.$state.commit('uppercase method name', data)

For those who need logical judgment timers and need to send ajax requests, they need to call dispatch in the component method to connect actions to perform logical judgment and send ajax requests in actions: this.$state.dispatch(' method name in action ', data).

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 This file is used to create the most core store in Vuex

//引入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>

If you run it directly, you will of course report an error, because you have to define actions on index.js

output two parameters

It is found that b is the value we want to add, which is this.n in the component

And a is a mini version of the store we hope contains the API we want to use

Then we try to call commit

I found that I wrote an error in this way, because there is also a method of jia in the mutation

Then we write the mutation. Note that the method in the mutation is generally written in uppercase, so that it can be distinguished

Then output a, b

It is found that a is the state, and b is the value passed by actions

And this state is equivalent to an object that also has the monitoring of get set data

Then read the state in the component

found in this.$store.state.sum

There is no need to write this on the template

achieve less

store.index.js

components

Then implement the addition of odd numbers and wait for a while to add

The judgment is written in the component

Write the judgment in actions in src/store/index.js

Note that you must not write any logic in the mutation, and do not send Ajax requests, and do not write timers. These are all written in actions

then you will find

The addition and subtraction of actions here seems to have no effect, no logical judgment, and no meaning of existence

and then note out

I said before that you can directly call the commit in the component to contact the mutation

Then because calling dispatch is to contact actions, and calling commit is to contact mutations, so the method name here should be capitalized

[Vue] vuex summation case

Guess you like