add mutations

Author: starkwang

src/components/Stark.vue

@@ -1,16 +1,26 @@
 <template>
   <div :class="$style.hello">
-    <!-- <h1>{{ num }}</h1> -->
+    <h1>{{ count }}</h1>
+    <button @click="add">add</button>
   </div>
 </template>
 
 <script>
-
 import stark from './stark.css'
 export default {
   name: 'HelloWorld',
+  computed: {
+    count() {
+      return this.$stark.state.count
+    },
+  },
   created() {
-    console.log('stark',this.$stark.state)
+    console.log('stark', this.$stark.state)
+  },
+  methods: {
+    add(){
+      this.$stark.commit('increment')
+    }
   }
 }
 </script>

src/stark/index.js

@@ -8,5 +8,11 @@ const debug = process.env.NODE_ENV !== 'production'
 
 export default new Vuex.Stark({
   state,
+  mutations: {
+    increment(state) {
+      state.count = state.count + 10
+      console.log('当前状态为', state.count)
+    },
+  },
   strict: debug,
 })

src/starkx/stark.js

@@ -1,13 +1,41 @@
 import applyMixin from './mixin'
-
+import Vue from 'vue'
 export class Stark {
   constructor(options = {}) {
     console.log('options', options)
     this.options = options
+    this.mutations = {}
+    const { commit } = this
+    this.commit = type => {
+      return commit.call(this, type)
+    }
+    forEachValue(options.mutations, (mutationFn, mutationName) => {
+      registerMutation(this, mutationName, mutationFn)
+    })
+    // 数据响应式
+    this._vm = new Vue({
+      data: {
+        state: options.state,
+      },
+    })
   }
   get state() {
     return this.options.state
   }
+
+  commit(type) {
+    this.mutations[type]()
+  }
+}
+
+function registerMutation(store, mutationName, mutationFn) {
+  store.mutations[mutationName] = () => {
+    mutationFn.call(store, store.state)
+  }
+}
+
+function forEachValue(obj, fn) {
+  Object.keys(obj).forEach(key => fn(obj[key], key))
 }
 
 export function install(Vue) {