Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mendapatkan nilai penghantaran dalam vue

Bagaimana untuk mendapatkan nilai penghantaran dalam vue

下次还敢
下次还敢asal
2024-05-09 13:54:18590semak imbas

Dalam Vuex, gunakan penghantaran untuk mencetuskan mutasi untuk menukar data keadaan. Gunakan dispatch untuk menyimpan nilai: this.$store.dispatch('setValue', 10); getValue: (state) => }Gunakan mapGetters dalam komponen untuk mengakses getter: computed: { ...mapGetters({ value: 'getValu

Bagaimana untuk mendapatkan nilai penghantaran dalam vue

Gunakan penghantaran dalam Vue untuk menyimpan nilai dan dapatkan

Dalam pengurusan negeri Vuex, kaedah penghantaran digunakan untuk mencetuskan mutasi. Mutasi ini boleh menukar data yang disimpan dalam keadaan Vuex dispatch 方法用于触发 mutations。这些 mutations 可以更改存储在 Vuex 状态中的数据。

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

<code class="javascript">this.$store.dispatch('setValue', 10);</code>

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

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

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

<code class="javascript">getters: {
  getValue: (state) => {
    return state.value;
  }
}</code>

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

<code class="javascript">computed: {
  ...mapGetters({
    value: 'getValue',
  }),
}</code>

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

Untuk menggunakan dispatch untuk menyimpan nilai, anda boleh menghantar nilai sebagai parameter mutasi Contohnya:

<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>
Dalam contoh ini, setValue. ialah mutasi tertentu yang menyimpan nilai 10 dalam keadaan Vuex Untuk mendapatkan nilai yang disimpan, anda boleh menggunakan getters Keadaan Vuex. Membolehkan anda mengakses dan memanipulasi data keadaan 🎜🎜Untuk membuat getter, anda boleh menggunakan pilihan getters dalam modul Vuex: 🎜rrreee🎜Anda kemudian boleh menggunakan mapGetters pembantu dalam komponen. Fungsi untuk mengakses pengambil: 🎜rrreee🎜 Kini anda boleh mengakses nilai yang disimpan menggunakan this.value dalam komponen 🎜🎜🎜Contoh penuh: 🎜🎜rrreee.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nilai penghantaran dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn