add vuex and i18n

package.json

@@ -26,6 +26,7 @@
     "less-loader": "^4.1.0",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
+    "vue-i18n": "^7.8.1",
     "vue-template-compiler": "^2.5.16",
     "vux": "^2.9.2",
     "vux-loader": "^1.2.9",

src/components/HelloWorld.vue

@@ -1,33 +1,69 @@
 <template>
   <div class="hello">
-    <h1>轩轩五子棋 V2</h1>
-    <a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>
+    <h1>{{$t('title')}} {{version}}</h1>
 
-    <div class="weui-cells__title">设置</div>
+
+    <div class="weui-flex operations">
+      <div class="weui-flex__item"><a href="javascript:;" class="weui-btn weui-btn_primary">{{$t('start')}}</a></div>
+      <div class="weui-flex__item"><a href="javascript:;" class="weui-btn weui-btn_warn">{{$t('give')}}</a></div>
+      <div class="weui-flex__item"><a href="javascript:;" class="weui-btn weui-btn_plain-primary">{{$t('forward')}}</a></div>
+      <div class="weui-flex__item"><a href="javascript:;" class="weui-btn weui-btn_plain-primary">{{$t('backward')}}</a></div>
+    </div>
+
+    <div class="weui-cells__title">{{$t('settings')}}</div>
     <div class="weui-cells">
-        <div class="weui-cell weui-cell_select weui-cell_select-after">
-            <div class="weui-cell__hd">
-                <label for="" class="weui-label">思考深度</label>
-            </div>
-            <div class="weui-cell__bd">
-                <select class="weui-select" name="select2">
-                    <option value="1">6~8 (简单)</option>
-                    <option value="2">8~10 (普通)</option>
-                    <option value="3">10~12 (困难)</option>
-                </select>
-            </div>
+      <div class="weui-cell weui-cell_select weui-cell_select-after">
+        <div class="weui-cell__hd">
+          <label for="" class="weui-label">{{$t('search deep')}}:</label>
+        </div>
+        <div class="weui-cell__bd">
+          <select class="weui-select" name="deep" :value="deep" @change="setDeep">
+            <option v-for="d in deepList" :key="d.value" :value="d.value">{{$t(d.title)}} ({{d.value}}~{{d.value+2}})</option>
+          </select>
+        </div>
+      </div>
+      <div class="weui-cell weui-cell_select weui-cell_select-after">
+        <div class="weui-cell__hd">
+          <label for="" class="weui-label">{{$t('lang')}}:</label>
+        </div>
+        <div class="weui-cell__bd">
+          <select class="weui-select" name="lang" :value="lang" @change="setLang">
+            <option value="en">English</option>
+            <option value="zh">简体中文</option>
+          </select>
         </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+import { SET_DEEP, SET_LANG } from '@/store/mutations.js'
+import i18n from '../i18n/index.js'
+
 export default {
   name: 'HelloWorld',
   components: {
   },
-  props: {
-    msg: String
+  computed: {
+    ...mapState({
+      version: 'version',
+      lang: state => state.home.lang,
+      deep: state => state.home.deep,
+      deepList: state => state.home.deepList
+    })
+  },
+  methods: {
+    setDeep (e) {
+      let value = e.target.value
+      this.$store.dispatch(SET_DEEP, parseInt(value))
+    },
+    setLang (e) {
+      let value = e.target.value
+      this.$store.dispatch(SET_LANG, value)
+      i18n.locale = value
+    }
   }
 }
 </script>
@@ -36,5 +72,15 @@ export default {
 <style scoped lang="scss">
 @import '../variables';
 h1 {
+  font-size: 28px;
+  color: $primary-color;
+  text-align: center;
+}
+
+.operations {
+  .weui-btn {
+    margin: 5px;
+    height: 46px;
+  }
 }
 </style>

src/i18n/index.js

@@ -0,0 +1,40 @@
+import VueI18n from 'vue-i18n'
+import Vue from 'vue'
+
+import store from '../store/index.js'
+
+Vue.use(VueI18n)
+
+const messages = {
+  en: {
+    'title': 'Xuanxuan Gobang',
+    'settings': 'Settings',
+    'lang': 'Language',
+    'search deep': 'Search Deep',
+    'easy': 'Easy',
+    'normal': 'Normal',
+    'hard': 'Hard',
+    'start': 'START',
+    'give': 'GIVE',
+    'forward': 'FWD',
+    'backward': 'BWD',
+  },
+  zh: {
+    'title': '轩轩五子棋',
+    'settings': '设置',
+    'lang': '语言',
+    'search deep': '思考深度',
+    'easy': '简单',
+    'normal': '普通',
+    'hard': '困难',
+    'start': '开始',
+    'give': '认输',
+    'forward': '前进',
+    'backward': '后退',
+  }
+}
+
+export default new VueI18n({
+  locale: store.getters.lang,
+  messages
+})

src/main.js

@@ -1,15 +1,18 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+import store from './store/index.js'
 import './registerServiceWorker'
 
 import 'weui/dist/style/weui.min.css'
+import './reset.scss'
+import i18n from './i18n/index.js'
 
 Vue.config.productionTip = false
 
 new Vue({
   router,
   store,
+  i18n,
   render: h => h(App)
 }).$mount('#app')

src/reset.scss

@@ -0,0 +1,3 @@
+select {
+  text-align-last: right;
+}

src/store.js → src/store/index.js

@@ -1,16 +1,19 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 
+import home from './modules/home.js'
+
 Vue.use(Vuex)
 
 export default new Vuex.Store({
+  modules: {
+    home
+  },
   state: {
-
+    version: "V3.0.0-beta"
   },
   mutations: {
-
   },
   actions: {
-
   }
 })

src/store/modules/home.js

@@ -0,0 +1,48 @@
+import { SET_DEEP, SET_LANG } from '../mutations.js'
+
+const state = {
+  lang: 'en',
+  deep: 6,
+  deepList: [{
+    value: 6,
+    title: 'easy'
+  }, {
+    value: 8,
+    title: 'normal'
+  }, {
+    value: 10,
+    title: 'hard'
+  }]
+}
+
+const getters = {
+  lang: state => state.lang,
+  deep: state => state.deep,
+  deepList: state => state.deepList
+}
+
+const mutations = {
+  [SET_DEEP] (state, deep) {
+    state.deep = deep
+  },
+  [SET_LANG] (state, lang) {
+    state.lang = lang
+  }
+}
+
+const actions = {
+  [SET_DEEP] ({commit}, deep) {
+    commit(SET_DEEP, deep)
+  },
+  [SET_LANG] ({commit}, lang) {
+    commit(SET_LANG, lang)
+  }
+}
+
+export default {
+  namespace: true,
+  state,
+  getters,
+  actions,
+  mutations
+}

src/store/mutations.js

@@ -0,0 +1,2 @@
+export const SET_DEEP = 'SET_DEEP'
+export const SET_LANG = 'SET_LANG'