Rumah > Artikel > hujung hadapan web > Ketahui lebih lanjut tentang prinsip pelaksanaan vuex
Apabila ditanya dalam temu bual tentang prinsip pelaksanaan vuex, bagaimana anda menjawab? Artikel berikut akan memberi anda pemahaman yang mendalam tentang prinsip pelaksanaan vuex. Saya harap ia akan membantu anda!
Saya tidak akan membincangkan butiran tentang vuex
Mari kita semak secara ringkas: Apabila aplikasi menemui 多个组件共享状态
, 单向数据流
yang ringkas mudah dimusnahkan: pertama,. Berbilang pandangan bergantung pada keadaan yang sama, kedua, tindakan daripada pandangan berbeza memerlukan perubahan keadaan yang sama. Jika yang pertama diselesaikan dengan menghantar parameter, ia tidak sesuai untuk komponen bersarang berbilang lapisan dan komponen adik-beradik jika yang kedua diselesaikan dengan menggunakan rujukan langsung daripada komponen induk-anak atau berbilang salinan perubahan peristiwa dan keadaan penyegerakan, ia tidak kondusif untuk penyelenggaraan kod.
Jadi, cara terbaik ialah mengekstrak keadaan komponen yang dikongsi dan mengurusnya dalam mod tunggal global! Ini adalah idea asas di sebalik vuex
.
[Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]
Jadi, kira-kira apa itu vuex Rangka kerja adalah seperti berikut:
class Store { constructor() { // state // getters // mutations // actions } // commit // dipatch }
Seterusnya, tulis dan baca sahaja.
vue create vue2-vuex//创建vue2项目 yarn add vuex@next --save//安装vuex yarn serve//启动项目
1 >
(1) Gunakan//store.js // 仓库 import Vue from 'vue' import Vuex from 'vuex' import extra from './extra.js' Vue.use(Vuex) //引入vuex的方式,说明Store需要install方法 export default new Vuex.Store({ // 仓库数据源 state: { count: 1, dowhat: 'addCount' }, }
//app.vue <template> <div class="testState"> <p>{{mycount}}</p> <p>{{dowhat}}:{{count}}</p> </div> </template> <script> export default { import { mapState } from 'vuex' // 推荐方式 computed: mapState()({ mycount: state => state.count }), // 推荐方式的简写方式 computed: { // 解构的是getters ...mapState(['count', 'dowhat']) }, } </script>(2) Nota
disebabkan storan keadaan Vuex Ia adalah reaktif. Cara paling mudah untuk membaca status daripada contoh kedai ialah mengembalikan status tertentu dalam
, mod ini. Dalam sistem binaan modular, setiap komponen yang perlu menggunakan keadaan perlu diimport dengan kerap, dan keadaan perlu disimulasikan semasa menguji komponen 计算属性
导致组件依赖全局状态单例
Vuex menyediakan mekanisme untuk melepasi keadaan melalui
) store
Vue.use(Vuex)
jadi sebagai tambahan kepada lima atribut dalaman
Selain itu, anda juga perlu mempertimbangkan kaedah pemalam, jadi rangka kerja umum adalah seperti berikut: Store
install
class Store { constructor() { // state // getters // mutations // actions //modules } // commit // dipatch } let Vuex = { Store, Install } export default VuexWalau bagaimanapun, pelaksanaan keadaan di atas mempunyai kekurangan: apabila data ditukar, data
class Store { constructor(options) { // state this.state = options.state } } let install = function(_Vue) { _Vue.mixin({ beforeCreate() { //在组件创建之前自动调用,每个组件都有这个钩子 if (this.$options && this.$options.store) { //this.$options读取根组件 this.$store = this.$options.store } else { this.$store = this.$parent && this.$parent.$store } } }) }tidak boleh dipaparkan secara dinamik. Jadi bagaimana untuk menjadikan data dalam
responsif menjadi isu utama? Malah, sama seperti state
dalam state
, anda juga boleh menjadikannya responsif dengan cara ini. Kemudian anda perlu memasukkan vue
daripada kaedah data
, jadi selepas perubahan: install
Vue
let Vue=null class Store { constructor(options) { // state this.vm = new _Vue({ data: { state: options.state//data中的数据才是响应式 } }) } get state() { return this.vm.state } } let install = function(_Vue) {//用于Vue.use(plugin) Vue=_Vue _Vue.mixin({ onBeforeCreate() { //在组件创建之前自动调用,每个组件都有这个钩子 if (this.$options && this.$options.store) { //this.$options读取根组件 this.$store = this.$options.store } else { this.$store = this.$parent && this.$parent.$store } } }) }
2 > (1) Gunakan
(2) Nota
Kadang-kadang kita perlu memperoleh beberapa keadaan daripada keadaan di kedai ( seperti Tambah, padam, tapis, dsb.), Vuex membenarkan kami mentakrifkan "pengambil" dalam kedai (boleh dianggap sebagai sifat pengiraan kedai). Sama seperti harta yang dikira, nilai pulangan pengambil akan dicache mengikut kebergantungannya, dan hanya akan dikira semula apabila nilai kebergantungannya berubah sebagai parameter pertamanya, dan pengambil diakses melalui kaedah panggilan akan dibuat setiap kali tanpa caching hasilnya//store.js export default new Vuex.Store({ // 计算属性 getters: { // 这里的函数不需要调用,可以直接使用,官方默认前面有get getCount(state) {//接受 state 作为其第一个参数 return state.count * 100; } }, }
(3) Pelaksanaan
mutasi
// getters let getters = options.getters || {} this.getters = {} Object.keys(getters).forEach(getterName => { Object.defineProperty(this.getters, getterName, { get: () => { return getters[getterName](this.state) } }) })
(1) Gunakan
(2) Nota
//store.js export default new Vuex.Store({ // 相当于methods mutations: { // mutations内部的函数,天生具备一个形参 add(state, n) { state.count += n; }, decrease(state, n) { state.count -= n; } }, }untuk menukar Vuex Satu-satunya cara untuk memulihkan keadaan dalam stor adalah melakukan mutasi. Mutasi dalam Vuex adalah serupa dengan peristiwa: setiap mutasi mempunyai rentetan
methods: { submit() { console.log('success'); }, // 解构仓库mutations里面的方法,要啥解构啥 ...mapMutations(['add', 'decrease']), // this.$store.commit('add'), ...mapActions(['addAction', 'decreaseAction']), // this.addAction()调用actions里面的方法 // this.$store.dispatch('add'), }jenis peristiwa (jenis)
dan fungsi panggil balik (pengendali) . Fungsi panggil balik ini ialah tempat perubahan keadaan dibuat, dan ia menerima keadaan sebagai parameter pertama dan tidak boleh memanggil pengendali mutasi secara langsung. Pilihan ini lebih seperti pendaftaran acara: "Apabila mutasi jenis
dicetuskan, panggil fungsi ini untuk membangunkan pengendali mutasi, anda perlu memanggil kaedahstore.commit dengan jenis yang sepadan boleh menghantar parameter tambahan kepada , iaitu muatan increment
mutasi (muatan) Dalam kebanyakan kes, muatan haruslah objek, yang boleh mengandungi berbilang medan dan rekod Mutasi akan lebih mudah dibaca
(3) Pelaksanaanstore.commit
4 >
(1) Gunakan// mutations let mutations = options.mutations || {} this.mutations = {} Object.keys(mutations).forEach(mutationName => { this.mutations[mutationName] = (arg) => {//保证多个(第二个)参数的传入 mutations[mutationName](this.state, arg) } }) commit = (method, arg) => {//使用箭头函数改变被调用的this的指向 // console.log(this); this.mutations[method](arg) }
(2) Perhatikan
store.dispatch
方法触发store.dispatch
可以处理被触发的 action 的处理函数返回的 Promise,并且 store.dispatch
仍旧返回 Promisestore.dispatch
在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行(3)实现
// actions let actions = options.actions || {} this.actions = {} Object.keys(actions).forEach(actionName => { this.actions[actionName] = (arg) => { actions[actionName](this, arg) } }) dispatch=(method, arg) =>{ this.actions[method](arg) }
5、modules
(1)使用
// actions let actions = options.actions || {} this.actions = {} Object.keys(actions).forEach(actionName => { this.actions[actionName] = (arg) => { actions[actionName](this, arg) } }) dispatch=(method, arg) =>{ this.actions[method](arg) }
//store.js modules: { extra: extra }
(2)注意
context.state
暴露出来,根节点状态则为 context.rootState
对于模块内部的 getter,根节点状态(rootState)会作为第三个参数暴露出来
let Vue = null//全局的_Vue class Store { constructor (options) { // state //this.state = options.state 写法不完美,当改变数据的时候,不能动态的渲染,所以需要把data中的数据做成响应式的 this.vm = new _Vue({ data: { state: options.state//data中的数据才是响应式 } }) // getters let getters = options.getters || {} this.getters = {} Object.keys(getters).forEach(getterName => { Object.defineProperty(this.getters, getterName, { get: () => { return getters[getterName](this.state) } }) }) // mutations let mutations = options.mutations || {} this.mutations = {} Object.keys(mutations).forEach(mutationName => { this.mutations[mutationName] = (arg) => {//保证多个(第二个)参数的传入 mutations[mutationName](this.state, arg) } }) // actions let actions = options.actions || {} this.actions = {} Object.keys(actions).forEach(actionName => { this.actions[actionName] = (arg) => { actions[actionName](this, arg) } }) } dispatch=(method, arg) =>{ this.actions[method](arg) } commit = (method, arg) => { // console.log(this); this.mutations[method](arg) } get state() { return this.vm.state } } let install = function(_Vue) { Vue = _Vue Vue.mixin({ beforeCreate() {//在组件创建之前自动调用,每个组件都有这个钩子 if (this.$options && this.$options.store) { // this.$options读取到根组件 this.$store = this.$options.store } else { // //如果不是根组件的话,也把$store挂到上面,因为是树状组件 this.$store = this.$parent && this.$parent.$store } } }) } let Vuex = { Store, install } export default Vuex
Atas ialah kandungan terperinci Ketahui lebih lanjut tentang prinsip pelaksanaan vuex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!