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