Maison > interface Web > Voir.js > Comment obtenir la valeur de répartition dans vue

Comment obtenir la valeur de répartition dans vue

下次还敢
Libérer: 2024-05-09 13:54:18
original
623 Les gens l'ont consulté

Dans Vuex, utilisez la répartition pour déclencher des mutations afin de modifier les données d'état. Utilisez dispatch pour stocker une valeur : this.$store.dispatch('setValue', 10); utilisez des getters pour dériver des données de l'état : getters : { getValue : (état) => { return state.value ; }Utilisez mapGetters dans le composant pour accéder au getter : calculé : { ...mapGetters({ value: 'getValu

Comment obtenir la valeur de répartition dans vue

Utilisez dispatch dans Vue pour stocker les valeurs et get

Dans la gestion de l'état Vuex, la méthode dispatch est utilisée pour déclencher mutations. Ces mutations peuvent modifier les données stockées dans l'état Vuex dispatch 方法用于触发 mutations。这些 mutations 可以更改存储在 Vuex 状态中的数据。

要使用 dispatch 存储一个值,可以将值作为 mutation 的参数传递。例如:

<code class="javascript">this.$store.dispatch('setValue', 10);</code>
Copier après la connexion

在此示例中,setValue 是一个指定的 mutation,用于将值 10 存储在 Vuex 状态中。

要获取存储的值,可以使用 getters。getters 是从 Vuex 状态派生的计算属性,使你可以访问和操作状态数据。

要创建 getter,可以在 Vuex 模块中使用 getters 选项:

<code class="javascript">getters: {
  getValue: (state) => {
    return state.value;
  }
}</code>
Copier après la connexion

然后,可以在组件中使用 mapGetters 助手函数来访问 getter:

<code class="javascript">computed: {
  ...mapGetters({
    value: 'getValue',
  }),
}</code>
Copier après la connexion

现在,你可以在组件中使用 this.value

Pour utiliser dispatch pour stocker une valeur, vous pouvez transmettre la valeur comme paramètre de mutation Par exemple :

<code class="javascript">// Vuex 模块
const module = {
  state: {
    value: null,
  },
  mutations: {
    setValue(state, value) {
      state.value = value;
    },
  },
  getters: {
    getValue: (state) => {
      return state.value;
    }
  }
};

// Vue 组件
export default {
  computed: {
    ...mapGetters({
      value: 'getValue',
    }),
  },
  methods: {
    setValue() {
      this.$store.dispatch('setValue', 10);
    },
  },
};</code>
Copier après la connexion
Dans cet exemple, setValue. est une mutation spécifiée qui stocke la valeur 10 dans l'état Vuex. Pour obtenir la valeur stockée, vous pouvez utiliser des getters. state. Vous permet d'accéder et de manipuler les données d'état 🎜🎜Pour créer des getters, vous pouvez utiliser l'option getters dans le module Vuex : 🎜rrreee🎜Vous pouvez ensuite utiliser les mapGetters. helper dans le composant. Fonction pour accéder au getter : 🎜rrreee🎜Vous pouvez maintenant accéder à la valeur stockée en utilisant this.value dans le composant 🎜🎜🎜Exemple complet : 🎜🎜rrreee.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
vue
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal