Rumah >hujung hadapan web >View.js >Mari kita bincangkan tentang cara vuex memodulatkan pengekodan + ruang nama
Bagaimanakah vuex memodulatkan pengekodan + ruang nama? Mari kita lihat secara ringkas artikel ini, saya harap ia akan membantu semua orang!
Sedikit a: "Mengapa anda mahu mendayakan ini?" Shan Yu: "Sudah tentu ia adalah untuk menjadikan kod lebih mudah untuk diselenggara dan membuat klasifikasi pelbagai data lebih jelas
Sedikit: "Kalau begitu, bagaimana kita boleh mencapai pengekodan modular + ruang nama<.>Di mana?”
Shanyu: “Itu sahaja yang diperlukan”namespaced: trueLetakkan semua perkara dalam komponen Count dan komponen Person ke dalam stor
// Count的相关配置 export default { namespaced: true, actions: { // 奇数加法 jiaodd(context, value) { if (context.state.sum % 2) { context.commit('JIA', value) } }, // 延迟加 jiaWait(context, value) { setTimeout(() => { context.commit("JIA", value) }, 500); }, }, mutations: { JIA(state, value) { state.sum += value }, JIAN(state, value) { state.sum -= value }, }, state: { sum: 0, // 当前和 school: '山鱼小学', subject: '前端', }, getters: { bigSum(state) { return state.sum * 10 } } }
2 Selepas membuka ruang nama, baca data keadaan
computed: { // 自己读取 personList() { returnthis.$store.state.personAbout.personList; }, sum() { returnthis.$store.state.countAbout.sum; }, }, // 借助mapState读取 computed: { ...mapState("countAbout", ["sum", "subject", "school"]), ...mapState("personAbout", ["personList"]) },
3 membuka ruang nama, Baca data pengambil dalam komponen
computed: { // 自己读取 firstName() { returnthis.$store.getters["personAbout/firstPersonName"]; } }, methods: { // 借助mapGetters读取 // 借助mapMutations生成对应的方法,方法种会调用相应的commit去联系mutations ...mapMutations('countAbout',{ increment: "JIA", decrement: "JIAN" }), // 对象式 ...mapActions('countAbout',{ incrementOdd: "jiaodd", incrementWait: "jiaWait" }) //对象式 },
4 Selepas membuka ruang nama, panggil penghantaran
methods: { // 直接dispath addWang() { constpersonObj= { id: nanoid(), name: this.name }; this.$store.dispatch("personAbout/addNameWang", personObj); this.name=""; }, }, //借助mapGetters读取: computed: { ...mapGetters('countAbout',['bigSum']) },
5. . Bukanya Selepas ruang nama, panggil commit
methods: { // 直接调用 add() { constpersonObj= { id: nanoid(), name: this.name }; this.$store.commit("personAbout/ADD_PERSON", personObj); this.name=""; }, } methods: { // 借助mapMutations生成对应的方法,方法种会调用相应的commit去联系mutations ...mapMutations('countAbout',{ increment: "JIA", decrement: "JIAN" }), // 对象式 }, }dalam komponen Hanya boleh dikatakan bahawa modularisasinya sangat wangi, kodnya lebih jelas dan datanya lebih jelas, dan penyelenggaraan kemudian. juga sangat niue (perkongsian video pembelajaran :
Tutorial pengenalan Vuejs, Video pengaturcaraan asas)
Atas ialah kandungan terperinci Mari kita bincangkan tentang cara vuex memodulatkan pengekodan + ruang nama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!