この記事では、Vue3がVuex、vue2をどのように使用するかについて説明します。ここをクリックしてください
Vue2 vuexは状況全体を実行し、article_Technologyフロントエンド全体をマスターします。愛に忠実です-CSDNブログ
コンテンツ
Vue3はシンタックスシュガー（mapState）を使用してvuex状態データを抽出します
Vue3は、シンタックスシュガー（mapGetters）を使用してvuexゲッターからデータを抽出します
Vue3は、シンタックスシュガー（mapMutations）を使用してvuexミューテーションからデータをフェッチします
Vue3はシンタックスシュガー（mapActions）を使用してvuexアクションのデータを抽出します
Vue3の構文糖衣は、特にvuexを初めて使用する人にとっては、それほど単純ではありません。ただし、この記事は非常に単純です。vue2でvuex構文を使用することに習熟している場合は、vue3のvuexの使用法を確認するのはそれほど曖昧ではありません。将来の使用のために収集することをお勧めします。
最初にstore/index.jsでデータを定義します
ページで使用
ブラウザ効果
シンタックスシュガー初登場
どうして！それほど長く書きたくない場合は、シンタックスシュガーを使用します（$ store.stateを書く必要はありません）。
useStoreケースを導入する必要があります。これがないため、計算されたvuexデータを取り出すことをお勧めします。そうしないと、vuexデータは対応する式を失います。
つまり、vuex変数を使用する場合、計算されたものを宣言するのはもっと面倒ですよね？
次の図で理解しやすくなります
vue3は計算さ れたものを使用してvuexデータを取り出します
$ store.stateを記述しないことは可能ですか、< 計算されたものをあまり多く定義せずに> 、構文糖衣を使用できますが、独自のループ関数を記述する必要があります。これは困難です。
Vue3 はシンタックスシュガー（mapState）を使用してvuex状態データ を抽出します
<template>
<div>
<div>{
{ $store.state.counter }}</div>
<div>{
{ counter }}</div>
<div>{
{ age }}</div>
<div>{
{ height }}</div>
</div>
</template>
<script>
import { useStore, mapState } from "vuex";
import { computed } from "vue";
export default {
components: {},
setup() {
// 因为this指向的不是当前组件事例，所以引入useStore事例赋值一个变量，方便获取
const store = useStore();
// 上面说了用一个vuex的数据，就需要定义一个computed，也就是说计算属性只能取出一个vuex数据
// 那这样用语法糖，解构这么多，想要用在computed中只能循环取出，循环取出之后会发现报错，
// 找不到store，是因为this问题，所以改变this指向，
const storeArr = mapState(["counter", "age", "height"]);
const storeState = {};
Object.keys(storeArr).forEach((fnKey) => {
const fn = storeArr[fnKey].bind({ $store: store });
storeState[fnKey] = computed(fn);
});
return {
store,
storeArr,
...storeState,
};
},
};
</script>
<style lang="scss" scoped></style>
この図を使用して、vue3vuexのシンタックスシュガーを学習する必要があります
ブラウザのレンダリング 
まだ分からない、殴ってください！
Vue3 はシンタックスシュガー（ mapGetters ） を使用してvuexゲッター からデータをフェッチします
store/index.jsの場所
<template>
<div>
<h2>{
{ nameInfo }}</h2>
<h2>{
{ AgeInfo }}</h2>
</div>
</template>
<script>
import { computed } from "vue";
import { mapGetters, useStore } from "vuex";
export default {
components: {},
setup() {
// 拿到store独享
const store = useStore();
const storeGetterFns = mapGetters(["nameInfo", "AgeInfo"]);
// 对数据进行转换
const storeGetters = {};
Object.keys(storeGetterFns).forEach((fnKey) => {
const fn = storeGetterFns[fnKey].bind({ $store: store });
storeGetters[fnKey] = computed(fn);
});
return {
...storeGetters,
};
},
};
</script>
<style lang="scss" scoped></style>
ブラウザのレンダリング
Vue3 は、シンタックスシュガー（ mapMutations ）を使用してvuexミューテーションからデータをフェッチします
<template>
<div>
<h2>当前计数: {
{ $store.state.counter }}</h2>
<hr />
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
<hr />
<button @click="increment_n({ n: 10 })">+10</button>
<hr />
</div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
setup() {
const storeMutations = mapMutations(["increment", "decrement","increment_n"]);
return {
...storeMutations,
};
},
};
</script>
<style scoped></style>
ブラウザのレンダリング：
Vue3 はシンタックスシュガー（ mapActions ）を使用してvuexアクションのデータを抽出します
2つのトリガー方法、2つの定義形式で、雷と稲妻をマスターする方法を学びます。
<template>
<div>
<h2>当前计数: {
{ $store.state.counter }}</h2>
<hr />
<button @click="incrementAction">+1</button>
<button @click="decrementAction">-1</button>
<hr />
<button @click="add">+1</button>
<button @click="sub">-1</button>
<hr />
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
setup() {
// 数组形式
const actions = mapActions(["incrementAction", "decrementAction"]);
// 对象形式
const actions2 = mapActions({
add: "incrementAction",
sub: "decrementAction",
});
return {
...actions,
...actions2,
};
},
};
</script>
<style scoped></style>
ブラウザのレンダリング
結論：誰もが自分の仕事を完璧に完了し、早く仕事を辞めることができることを願っています。