核心概念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开发资源,技术博客