首页 > 专栏 > 前端 > 文章详情
Vuex 的核心概念及底层原理 发布于:2021-04-27 19:51:02   来源:Vue   查看:33  讨论:0
核心概念L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
1.State --- this.$store.state.xxx 取值;L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
2.Getter --- this.$store.getters.xxx 取值(类似于计算属性,还是获取的Vue的数据缓存,用来取值的);L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
3.Mutation --- this.$store.commit('funcName') 赋值;L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
4.Action --- this.$store.dispatch('funcName') 通知携带上下文,还是交给commit通知mutation赋值;L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
5.Module --- 模块化,对我们的状态进一步的做一些组织管理。L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
底层原理
L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
1.State --- 提供响应式数据;L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
2.Getter --- 借助Vue的计算属性 computed 来实现缓存;L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
3.Mutation --- 更改state的方法;L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
4.Action --- 触发mutation的方法,一般异步;L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
5.Module --- 大的状态树,通过Vue.set 动态添加state到响应数据中。L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
根据描述,我们模拟了一个简易的vuex核心函数:
L7x易塔云建站-模板下载,web开发资源,技术博客
 
import Vue from 'vue'L7x易塔云建站-模板下载,web开发资源,技术博客
const Store = function Store(options = {}) {L7x易塔云建站-模板下载,web开发资源,技术博客
    const {state = {}, mutations={}} = options;L7x易塔云建站-模板下载,web开发资源,技术博客
    this._vm = new Vue({L7x易塔云建站-模板下载,web开发资源,技术博客
        data: {L7x易塔云建站-模板下载,web开发资源,技术博客
            $$state: stateL7x易塔云建站-模板下载,web开发资源,技术博客
        },L7x易塔云建站-模板下载,web开发资源,技术博客
    });L7x易塔云建站-模板下载,web开发资源,技术博客
    this._mutations = mutations;L7x易塔云建站-模板下载,web开发资源,技术博客
}L7x易塔云建站-模板下载,web开发资源,技术博客
Store.prototype.commit = function(type, payload) {L7x易塔云建站-模板下载,web开发资源,技术博客
    if(this._mutations[type]) {L7x易塔云建站-模板下载,web开发资源,技术博客
        this._mutations[type](this.state, payload)L7x易塔云建站-模板下载,web开发资源,技术博客
    }L7x易塔云建站-模板下载,web开发资源,技术博客
};L7x易塔云建站-模板下载,web开发资源,技术博客
Object.defineProperties(Store.prototype, {    //修改属性的默认特性,必须使用ECMAScript5提供的Object.defineProperty()方法。L7x易塔云建站-模板下载,web开发资源,技术博客
    //而该方法接收三个参数:属性所在的对象,属性名字,和一个描述符对象;L7x易塔云建站-模板下载,web开发资源,技术博客
    //描述符对象:configurable,emumerable,writable,value 。设置其中一或多个的值,就可以修改对应的特性值。L7x易塔云建站-模板下载,web开发资源,技术博客
    state: {L7x易塔云建站-模板下载,web开发资源,技术博客
        get: function() {L7x易塔云建站-模板下载,web开发资源,技术博客
            return this._vm._data.$$stateL7x易塔云建站-模板下载,web开发资源,技术博客
        }L7x易塔云建站-模板下载,web开发资源,技术博客
    }L7x易塔云建站-模板下载,web开发资源,技术博客
});L7x易塔云建站-模板下载,web开发资源,技术博客
export default {Store};
我们的main.js代码如下:
import Vue from 'vue'L7x易塔云建站-模板下载,web开发资源,技术博客
import Vuex from './min-vuex.js'//根据老师,实现的简易vuex原理的commit方法L7x易塔云建站-模板下载,web开发资源,技术博客
import App from './App.vue'L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
Vue.use(Vuex)L7x易塔云建站-模板下载,web开发资源,技术博客
Vue.config.productionTip = falseL7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
const store = new Vuex.Store({L7x易塔云建站-模板下载,web开发资源,技术博客
    state: {L7x易塔云建站-模板下载,web开发资源,技术博客
        count: 0,L7x易塔云建站-模板下载,web开发资源,技术博客
    },L7x易塔云建站-模板下载,web开发资源,技术博客
    mutations: {    L7x易塔云建站-模板下载,web开发资源,技术博客
        increment(state) {L7x易塔云建站-模板下载,web开发资源,技术博客
            state.count++L7x易塔云建站-模板下载,web开发资源,技术博客
        }L7x易塔云建站-模板下载,web开发资源,技术博客
    },L7x易塔云建站-模板下载,web开发资源,技术博客
})L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
Vue.prototype.$store = store;L7x易塔云建站-模板下载,web开发资源,技术博客
new Vue({L7x易塔云建站-模板下载,web开发资源,技术博客
    // store,L7x易塔云建站-模板下载,web开发资源,技术博客
  render: h => h(App),L7x易塔云建站-模板下载,web开发资源,技术博客
}).$mount('#app')
我们的app.vue代码如下:
<template>L7x易塔云建站-模板下载,web开发资源,技术博客
  <div id="app">L7x易塔云建站-模板下载,web开发资源,技术博客
    {{ myGetCount }}L7x易塔云建站-模板下载,web开发资源,技术博客
        <br>L7x易塔云建站-模板下载,web开发资源,技术博客
        <!-- {{ $store.getters.doubleCount }} -->L7x易塔云建站-模板下载,web开发资源,技术博客
        <br>L7x易塔云建站-模板下载,web开发资源,技术博客
        <!-- <button @click="$store.dispatch('incrementAction')">Action-count++</button> -->L7x易塔云建站-模板下载,web开发资源,技术博客
  </div>L7x易塔云建站-模板下载,web开发资源,技术博客
</template>L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
<script>L7x易塔云建站-模板下载,web开发资源,技术博客
export default {L7x易塔云建站-模板下载,web开发资源,技术博客
  name: 'App',L7x易塔云建站-模板下载,web开发资源,技术博客
    computed: {L7x易塔云建站-模板下载,web开发资源,技术博客
        myGetCount() {L7x易塔云建站-模板下载,web开发资源,技术博客
            return this.$store.state.countL7x易塔云建站-模板下载,web开发资源,技术博客
        },L7x易塔云建站-模板下载,web开发资源,技术博客
    },L7x易塔云建站-模板下载,web开发资源,技术博客
}L7x易塔云建站-模板下载,web开发资源,技术博客
</script>
L7x易塔云建站-模板下载,web开发资源,技术博客
测试可正常实现commit方法:L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客
L7x易塔云建站-模板下载,web开发资源,技术博客

评论

  • 匿名