Eine kurze Analyse der Verwendung der zentralisierten Staatsverwaltung Vuex

Wie verwende ich Vuex mit zentraler Statusverwaltung? Der folgende Artikel wird Ihnen dabei helfen, Vuex zu verstehen und kurz auf die Verwendung von Vuex einzugehen. Ich hoffe, er wird Ihnen hilfreich sein! 1. Was ist Vuex? ist auch eine Art der Kommunikation zwischen Komponenten und eignet sich für jede Kommunikation zwischen Komponenten der Komponente muss denselben Zustand ändern

2.1 So verwenden Sie Vuex

Zunächst müssen wir wissen, dass bei Verwendung von Vuex eine hohe Wahrscheinlichkeit besteht, dass zwei oder mehr Komponenten gemeinsam genutzt werden müssen ein Satz von Daten/Status, daher müssen Sie zuerst zwei Komponenten (Anzahl bzw. Person) vorbereiten, und dann müssen wir eine Store-Datei im src-Verzeichnis hinzufügen, da Vuex auf den Store angewiesen ist, um eine Reihe von Vorbereitungsaufgaben auszuführen

2.2 Zählkomponente

In dieser Komponente können wir die Karte sehen ... eine Menge Dinge. Hier müssen wir über die vier Karten

in Vuex sprechen Am Ende stellen wir nur die Funktionen dieser Komponente vor. Count ist eine A-Komponente mit „leistungsstarken“ Rechenfunktionen. Sie kann die Endzahl um das Zehnfache verstärken und Operationen mit ungeraden Zahlen ausführen extrem „leistungsstark“

<template>
  <div>
    <h3>当前和为：{{sum}}</h3>
    <h3>当前和为：放大10倍：{{bigSum}}</h3>
    <h3>我在{{school}},学习{{subject}}</h3>
    <h3>下方组件的总人数{{personList.length}}</h3>

    <select v-model.number="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(num)">＋</button>
    <button @click="decrement(num)">-</button>
    <button @click="incrementOdd(num)">奇数＋</button>
    <button @click="incrementWait(num)">500ms后再＋</button>
  </div>
</template>
<script>
// 引入mapState等
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      num: 1 // 用户选择的数字
    };
  },
  computed: {
    // 使用mapState生成计算属性，从state种读取数据(...mapstate()的意思是将其内的对象全部展开的计算属性里面)
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 对象写法
    ...mapState(["sum", "school", "subject", "personList"]), // 数组写法
    // 使用mapGetters生成计算属性，从getters种读取数据
    // ...mapGetters(["bigSum"]), // 数组写法
    ...mapGetters({ bigSum: "bigSum" }) // 数组写法
  },
  methods: {
    // 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 对象式
    ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }) //数组式
    // ...mapActions(["jiaodd", "jiaWait"]) //数组式简写
  },
  mounted() {
  }
};
</script>
<style>
button {
  margin-left: 5px;
}
</style>

2.3Personenkomponente

Personenkomponente hat eine „leistungsstarke“ Funktion zum Hinzufügen von Personen, er kann Ihre Verwandten und Freunde nach seinen eigenen Wünschen hinzufügen

<template>
  <div>
    <h3>人员列表</h3>
    <h3>Count组件的求和为{{sum}}</h3>
    <input type="text" placehodler="请输入名字" v-model="name">
    <button @click="add">添加</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>
<script>
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: ""
    };
  },
  computed: {
    personList() {
      return this.$store.state.personList;
    },
    sum() {
      return this.$store.state.sum;
    }
  },
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.commit("ADD_PERSON", personObj);
      this.name = "";
    }
  }
};
</script>

2.4 Einführung von Komponenten

Führen Sie diese beiden Komponenten jeweils in die App ein

<template>
  <div class="container">
    <Count></Count>
    <Person/>
  </div>
</template>

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

2.5 Konfigurieren Sie den Store index.js im Ordner

Sie müssen eine neue index.js-Datei im Store-Ordner erstellen und dann den folgenden Code hineinschreiben Führen Sie zunächst vue und vuex ein und verwenden Sie dann die Aktion, um auf die Aktion zu reagieren. Hier können wir zwei Parameter erhalten, context und value

, die jeweils den Kontext und den übergebenen Wert darstellen Alles in dem Zustand, den wir im Kontext konfiguriert haben, ist der Wert hier 1

// 创建VUex种的store核心
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)
// 准备actions——用于组件内的动作响应
const actions = {
    // 奇数加法
    jiaodd(context, value) {
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    // 延迟加
    jiaWait(context, value) {
        setTimeout(() => {
            context.commit("JIA", value)
        }, 500);
    },
}
// 准备mutations——用于数据操作
const mutations = {
    JIA(state, value) {
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    },
    ADD_PERSON(state, value) {
        console.log('mustations种的ADD_PERSON被调用',state.personList);
        state.personList.unshift(value)
    }
}
// 准备state——用于数据的储存
const state = {
    sum: 0, // 当前和
    school: '山鱼小学',
    subject: '前端',
    personList:[{id:'001',name:'张三'}]
}
// 用于加工state种的数据
const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
// 创建store并且暴露store
export default new Vuex.Store({
    // actions: actions,// 前后名称一样所以可以触发简写模式
    actions,
    mutations,
    state,
    getters
});

2 Die Verwendung von vier Kartenmethoden

1.

mapState: Wird verwendet, um uns dabei zu helfen, die Daten im Status für Berechnungsattribute abzubilden

3.mapMutations

: Wird verwendet, um uns bei der Generierung und Mutationen zu helfen. Kommunikationsmethoden, einschließlich der Funktion $store.commit()

computed: {
    // 使用mapState生成计算属性，从state种读取数据(...mapstate({})的意思是将其内的对象全部展开的计算属性里面)
    ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 对象写法
        
    // ...mapState(["sum", "school", "subject"]), // 数组写法
  }

3.

mapActions: Wird verwendet, um uns zu helfen Generieren Sie Methoden zur Kommunikation mit Mutationen, einschließlich der Funktion $store.commit()

computed: {
    // 使用mapGetters生成计算属性，从getters种读取数据
    ...mapGetters({bigSum："bigSum"})
    ...mapGetters(["bigSum"])
  }

Hinweis: Wenn Sie bei der Verwendung von mapActions und mapMutations Parameter übergeben müssen, müssen Sie diese andernfalls beim Binden des Ereignisses in der Vorlage übergeben Die Parameter sind Ereignisobjekte.

(Teilen von Lernvideos:

Vuejs-Einführungs-Tutorial, Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung der zentralisierten Staatsverwaltung Vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!