Rumah hujung hadapan web tutorial js vuex导出对象对添加值到state

vuex导出对象对添加值到state

Jun 14, 2018 am 11:48 AM
vuex Mudah digunakan

这次给大家带来vuex导出对象对添加值到state,vuex导出对象对添加值到state的注意事项有哪些,下面就是实战案例,一起来看一下。

vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。

1.在vue 组件中

执行enabledcheckbox方法 ,true 为参数,用来改变state中的值

  this.$store.dispatch("enabledcheckbox",true)
Salin selepas log masuk

从state获取useredit的值

this.$store.state.useredit
Salin selepas log masuk

2 在vuex导出的对象对添加 值到state

添加 mutations 来改变state的值

添加 actions 来 mutations

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
export default new vuex.Store({
    state: {
      useredit: false,
    },
    mutations: {
      ENABLEDCHECKBOX(state, value) {
        state.checkboxDisable = value
      },
    },
    actions: {
      enabledcheckbox({ commit }, value) {
        commit('ENABLEDCHECKBOX', value)
      },
    }
  })
  //console.log(vuex)
Salin selepas log masuk

在main.js

import store from './vuex'
new Vue({
 el: '#app',
 router,
 store,
 render:h=>h(App)
})
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

如何使用Angular组件交互

使用vue-route+beforeEach做出导航守卫

Atas ialah kandungan terperinci vuex导出对象对添加值到state. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pasang cmake menggunakan ubuntu dan penggunaannya yang mudah Pasang cmake menggunakan ubuntu dan penggunaannya yang mudah Jan 01, 2024 am 08:57 AM

Mukadimah: Baru-baru ini, saya tiba-tiba ingin memindahkan persekitaran pembangunan ke Linux Pada masa yang sama, saya juga sedang bersiap untuk membaca beberapa kod sumber terbuka pada github Saya mendapati bahawa projek sumber terbuka secara amnya diuruskan dengan cmake. Jadi saya hanya bermain-main dengannya pada mesin maya saya sendiri. Saya tidak tahu apa itu cmake pada mulanya, tetapi kemudian saya secara kasar memahami peranannya melalui beberapa pengubahsuaian sebenarnya memberitahu pengkompil bagaimana untuk menyusun dan memautkan kod sumber. Anda mungkin ingin bertanya jika tiada makefile, mengapa anda memerlukannya? Ini melibatkan isu merentas platform. Di bawah platform Windows, ini diuruskan melalui fail projek Jika cmake tidak digunakan, maka kita perlu menulis fail projek yang sepadan dan membuat untuk sistem tetingkap dan Linux.

Bagaimana untuk menyelesaikan masalah 'Ralat: [vuex] tidak mengubah keadaan kedai vuex di luar pengendali mutasi apabila menggunakan vuex dalam aplikasi Vue? Bagaimana untuk menyelesaikan masalah 'Ralat: [vuex] tidak mengubah keadaan kedai vuex di luar pengendali mutasi apabila menggunakan vuex dalam aplikasi Vue? Jun 24, 2023 pm 07:04 PM

Dalam aplikasi Vue, menggunakan vuex ialah kaedah pengurusan keadaan biasa. Walau bagaimanapun, apabila menggunakan vuex, kadangkala kita mungkin menghadapi mesej ralat sedemikian: "Ralat:[vuex]donotmutatevuexstorestateoutsidemutationhandlers Apakah maksud mesej ralat ini? Mengapa mesej ralat ini muncul? Bagaimana untuk membetulkan ralat ini? Artikel ini akan membincangkan isu ini secara terperinci. Mesej ralat mengandungi

Amalan terbaik untuk menggunakan Vuex untuk mengurus keadaan global dalam Vue2.x Amalan terbaik untuk menggunakan Vuex untuk mengurus keadaan global dalam Vue2.x Jun 09, 2023 pm 04:07 PM

Vue2.x ialah salah satu rangka kerja bahagian hadapan paling popular pada masa ini, yang menyediakan Vuex sebagai penyelesaian untuk mengurus keadaan global. Menggunakan Vuex boleh menjadikan pengurusan negeri lebih jelas dan lebih mudah diselenggarakan Amalan terbaik Vuex akan diperkenalkan di bawah untuk membantu pembangun menggunakan Vuex dengan lebih baik dan meningkatkan kualiti kod. 1. Gunakan keadaan organisasi modular Vuex menggunakan pepohon keadaan tunggal untuk mengurus semua keadaan aplikasi, mengekstrak keadaan daripada komponen, menjadikan pengurusan negeri lebih jelas dan lebih mudah difahami. Dalam aplikasi dengan banyak keadaan, modul mesti digunakan

Bagaimana untuk menyelesaikan masalah 'Ralat: [vuex] jenis tindakan yang tidak diketahui: xxx' apabila menggunakan vuex dalam aplikasi Vue? Bagaimana untuk menyelesaikan masalah 'Ralat: [vuex] jenis tindakan yang tidak diketahui: xxx' apabila menggunakan vuex dalam aplikasi Vue? Jun 25, 2023 pm 12:09 PM

Dalam projek Vue.js, vuex ialah alat pengurusan keadaan yang sangat berguna. Ia membantu kami berkongsi keadaan antara berbilang komponen dan menyediakan cara yang boleh dipercayai untuk mengurus perubahan keadaan. Tetapi apabila menggunakan vuex, kadangkala anda akan menghadapi ralat "Error:[vuex]unknownactiontype:xxx". Artikel ini akan menerangkan punca dan penyelesaian ralat ini. 1. Punca ralat Apabila menggunakan vuex, kita perlu menentukan beberapa tindakan dan mu

Cara menggunakan Vuex dalam Vue3 Cara menggunakan Vuex dalam Vue3 May 14, 2023 pm 08:28 PM

Apakah yang Vuex lakukan? Vue rasmi: Alat pengurusan negeri Apakah pengurusan negeri yang perlu dikongsi di antara pelbagai komponen, dan ia responsif, satu perubahan, semua perubahan? Contohnya, beberapa maklumat status yang digunakan secara global: status log masuk pengguna, nama pengguna, maklumat lokasi geografi, item dalam troli beli-belah, dll. Pada masa ini, kami memerlukan alat sedemikian untuk pengurusan status global, dan Vuex ialah alat sedemikian. Pengurusan keadaan halaman tunggal Paparan–>Tindakan–>Lapisan paparan keadaan (paparan) mencetuskan tindakan (tindakan) untuk menukar keadaan (keadaan) dan bertindak balas semula untuk melihat lapisan (pandangan) vuex (Vue3.

Ketahui lebih lanjut tentang prinsip pelaksanaan vuex Ketahui lebih lanjut tentang prinsip pelaksanaan vuex Mar 20, 2023 pm 06:14 PM

Apabila ditanya dalam temu bual tentang prinsip pelaksanaan vuex, bagaimanakah anda harus menjawab? Artikel berikut akan memberi anda pemahaman yang mendalam tentang prinsip pelaksanaan vuex. Saya harap ia akan membantu anda!

Bagaimana untuk menyelesaikan masalah 'TypeError: Tidak dapat membaca harta 'xxx' undefined' apabila menggunakan vuex dalam aplikasi Vue? Bagaimana untuk menyelesaikan masalah 'TypeError: Tidak dapat membaca harta 'xxx' undefined' apabila menggunakan vuex dalam aplikasi Vue? Aug 18, 2023 pm 09:24 PM

Menggunakan Vuex dalam aplikasi Vue adalah operasi yang sangat biasa. Walau bagaimanapun, kadangkala apabila menggunakan Vuex, anda akan menemui mesej ralat "TypeError: Cannotreadproperty'xxx'ofundefined". Sebab masalah ini sebenarnya sangat jelas Ia adalah kerana apabila memanggil atribut Vuex tertentu, atribut ini tidak ditetapkan dengan betul.

Cara menggunakan vuex dalam vue3+vite Cara menggunakan vuex dalam vue3+vite Jun 03, 2023 am 09:10 AM

Langkah khusus: 1. Pasang vuex (vue3 disyorkan 4.0+) pnpmivuex-S2, konfigurasikan konfigurasi global importstorefrom'@/store'//hx-app dalam main.js constapp=createApp(App)app.use(store) 3 . Cipta folder dan fail baharu yang berkaitan Di sini, konfigurasikan berbilang js di dalam vuex yang berbeza untuk meletakkan halaman dan fail yang berbeza, kemudian gunakan fail teras Import.meta.glob daripada

See all articles