集中状態管理 Vuex の使用に関する簡単な分析

一元的な状態管理で Vuex を使用するにはどうすればよいですか?次の記事では、vuex について理解し、vuex の使用方法について簡単に説明します。

1.vuex とは

Vue での集中状態管理の専用実装 Vue プラグ-in は、Vue アプリケーション内の複数のコンポーネントの共有状態を集中管理 (読み取り/書き込み) できます。また、コンポーネント間通信の方法でもあり、あらゆるコンポーネント間通信に適しています

2. Vuex を使用する場合1. 複数のコンポーネントが同じ状態に依存する

##2. 異なるコンポーネントの動作は同じ状態を変更する必要がある

2.1 Vuex の使用方法

まず、Vuex を使用する場合、2 つ以上のコンポーネントが必要になる可能性が高いことを知っておく必要があります。データのセットを共有する必要があるため、最初に 2 つのコンポーネント (それぞれ Count と Person) を準備する必要があります。次に、Vuex はストアに依存して実行するため、src ディレクトリにストア ファイルを追加する必要があります。一連の準備タスク

2.2Countコンポーネント

このコンポーネントでは、マップ...たくさんのものを見ることができます。 vuex #map の 4 つの ## について話さなければならないので、map メソッドの使い方を最後に載せておきますが、ここではこのコンポーネントの機能のみを紹介します Count は「強力な」計算機能を備えたコンポーネントです。最終的な数値を10倍に増幅でき、奇数にもできるし、動作を遅らせることもできるので非常に「強力」です

#

<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.3パーソンコンポーネント

人物コンポーネントは「強力な」人々の機能によって追加され、彼は自分の希望に応じて親戚や友人を追加できます#

<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 コンポーネントの紹介

これら 2 つのコンポーネントをそれぞれアプリに導入します。コンポーネント

<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 ストア フォルダーの下にindex.jsを構成します

#ストア フォルダーの下に新しい Index.js ファイルを作成するには、次のコードをインデックス ファイルに書き込みます。まず、vue と vuex を導入し、アクションを使用して応答します。ここでは 2 つのパラメーターを受け取ることができます:

context

と valueこれらは、コンテキストと渡された値を分離します。コンテキスト上で構成した状態ですべてを見つけることができます。これがコンテキスト上にあるものであり、値です。ここでの値の値は、は 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 です。4 つのマップ メソッドの使用

#1.

mapState

: 状態のデータを計算された属性にマッピングするために使用されます

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

2.mapGetters

: ゲッター内のデータを計算されたプロパティにマップするために使用されます。

#

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

3.mapMutations :関数 $store.commit()

methods: {
    // 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 对象式
    // ...mapMutations(["JIA", "JIAN"]), // 数组式(button的名字和vuex里面的名字必须统一)
  },

3.## を含む、ミューテーションと通信するメソッドの生成に使用します。 #mapActions : $store.commit() の関数を含む、ミューテーションと通信するメソッドの生成に使用されます

  methods: {
     // 借助mapActions生成对应的方法，方法种会调用相应的dispath去联系actions
    ...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }), //对象式
    // ...mapActions(["jiaodd", "jiaWait"]) //数组式
  },

注: mapActions と mapMutation を使用する場合、必要に応じてパラメータを渡すには、テンプレートでイベントをバインドするときにパラメータを渡す必要があります。それ以外の場合、パラメータはイベント オブジェクトです。 (学習ビデオ共有: vuejs 入門チュートリアル 、基本プログラミング ビデオ )

以上が集中状態管理 Vuex の使用に関する簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。