Vuex入門（2）-突然変異の詳細な説明

コンテンツ

急いでクリックして、知識が不足している場所を確認してください~~~

Vuexの概要（1）-状態、mapState、...mapStateオブジェクトシンボルの
拡張Vuex（5）の概要-カプセル化されたモジュールのネットワーク全体の最も完全で詳細な説明（ソースコード付き）Vuexの概要（6）-mapState、mapGetters、mapMutations、mapActionsの最も完全で詳細な説明ネットワーク全体の終わり（ソースコード付き）

Vuex公式ウェブサイト：https://vuex.vuejs.org/zh/guide/#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84-store

1.store.js

Vuexは、Vue.jsアプリケーション用に特別に開発された状態管理パターン+ライブラリです。

突然変異と行動の比較の要約：

1.ミューテーションは同期的で、アクションは非同期です
。2.ミューテーションは状態を直接変更し、アクションはミューテーションを送信します
。3.アクションとミューテーションは、ペイロードとオブジェクトの分散の両方をサポートします。

mutations传参state

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {      //  类似于 data
    count: 1,
  },
  mutations: {  //  类似于计算属性  computed
    increment(state) {    //  把上面state对象当参数传入,取对象里面的进行操作
      state.count++
    },
    decrement(state) {
      state.count--
    },
  },
  getters:{
  },
  actions: {},
  modules: {}
})

2.ミューテーション.vueコンポーネントのミューテーション詳細な説明+写真

<template>
  <div>
    <h1>mutations的用法</h1>
    <div style="display: flex">
      <button style="width: 50px" @click="increment">+</button>
      {
   
   { count }}
      <button style="width: 50px" @click="decrement">-</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    count() {
      return this.$store.state.count; //  接收store.js里面的state下面的count        // 语法: this.$store.state.XX   XX为state下面的名称key
    },
  },
  methods: {
    increment() {
      this.$store.commit("increment"); //  接收store.js里面的mutations下面的increment方法   // 语法: this.$store.commit("XX"); XX 为mutations里面自定义函数名
    },
    decrement() {
      this.$store.commit("decrement"); //  接收store.js里面的mutations下面的decrement方法
    },
  },
};
</script>

以下に示すように

記事が良いと感じたら、忘れずに注意を払ってください。間違いがあれば訂正してください、ありがとうございます！！！