add vuex

web_src/package.json

@@ -24,6 +24,7 @@
     "vue-i18n": "5.0.3",
     "vue-router": "^3.3.4",
     "vuedraggable": "^2.23.2",
+    "vuex": "^3.5.1",
     "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {

web_src/src/main.js

@@ -18,6 +18,7 @@ import myEnLocale from '../static/lang/en'
 import 'url-search-params-polyfill'
 import 'babel-polyfill'
 import VueClipboard from 'vue-clipboard2'
+import store from './store/'
 
 Vue.use(util)
 Vue.config.productionTip = false
@@ -43,6 +44,7 @@ Vue.prototype.request = request
 new Vue({
   el: '#app',
   router,
+  store,
   template: '<App/>',
   components: { App }
 })

web_src/src/store/actions.js

@@ -0,0 +1,8 @@
+// action比mutation的好处是可以任意异步
+export default {
+  incrementAsync({ commit }) {
+    setTimeout(() => {
+      commit('increment')
+    }, 1000)
+  }
+}

web_src/src/store/index.js

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import mutations from './mutations'
+import actions from './actions'
+
+Vue.use(Vuex)
+
+const state = {
+  count: '1'
+}
+
+export default new Vuex.Store({
+  state,
+  actions,
+  mutations
+})

web_src/src/store/mutations.js

@@ -0,0 +1,11 @@
+// mutation必须是同步操作。异步操作需使用action
+
+const SOME_MUTATION = 'SOME_MUTATION'
+export default {
+  increment(state, payload) {
+    state.count++
+  },
+  [SOME_MUTATION](state) {
+    // mutate state
+  }
+}