- 新创建一个class类实现Vuex基本功能
- 将store注入Vue实例和Vue组件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span>{{num}}</span>
<button @click='add'>增加1</button>
<button @click='asyncAdd'>异步增加1</button>
<Child />
</div>
</body>
<script src="./vue.js"></script>
<script>
// 实现Vuex
class Store {
constructor(options) {
this.vm = new Vue({ // 实例化一个Vue对象，将 外面 Vuex的参数传进来
data() {
return { state: options.state } // 将 Vuex的参数 state 传进来，为的是实现数据的监听
}
})
let getters = options.getters;
this.getters = {}
Object.keys(getters).forEach(getterName => {
Object.defineProperty(this.getters, getterName, {
get: () => {
return getters[getterName](this.vm.state)
}
})
})
let mutations = options.mutations;
this.mutations = {};
Object.keys(mutations).forEach(mutationName => {
this.mutations[mutationName] = (payload) => {
mutations[mutationName](this.state, payload)
}
})
let actions = options.actions;
this.actions = {};
Object.keys(actions).forEach(actionName => {
this.actions[actionName] = (payload) => {
actions[actionName].call(this, this, payload)
}
})
}
get state() {
return this.vm.state;
}
commit(mutationName, payload) {
this.mutations[mutationName](payload);
}
dispatch(actionName, payload) {
this.actions[actionName](payload);
}
}
// 实例化一个Vuex
let store = new Store({
state: { num: 1 },
getters: {
getNum: function (state) {
return state.num
}
},
mutations: {
add(state, payload) {
state.num = state.num + payload;
}
},
actions: {
asyncAdd({ commit }, payload) {
setTimeout(() => {
this.commit('add', payload)
}, 3000)
}
}
})
//在Vue实例创建时插入Vue实例和Vue组件中
Vue.mixin({
beforeCreate() {
if (this.$options && this.$options.store) {
this.$store = this.$options.store;
} else {
this.$store = this.$parent && this.$parent.$store;
}
},
})
var Child = {
template: '<h1>{{$store.state.num}}</h1>'
}
new Vue({
el: '#app',
components: { Child },
computed: {
num() {
return this.$store.state.num
}
},
store: store,
methods: {
add() {
this.$store.commit('add', 1)
},
asyncAdd() {
this.$store.dispatch('asyncAdd', 10)
}
},
created() {
}
})
</script>
</html>
