vuex模块化

.prettierrc.js

@@ -4,7 +4,7 @@ module.exports = {
     // 与eslint集成（让prettier使用eslint的代码格式进行校验）
     eslintIntegration: true,
     // 换行长度
-    printWidth: 150,
+    printWidth: 120,
     // tab缩进大小,默认为2
     tabWidth: 4,
     // 使用tab缩进，默认false

README.md

@@ -3,7 +3,7 @@
 
 ## 项目介绍
 
-> node 12.18.3
+> node 8.11.0+ (推荐12.18.3)
 > npm 6.14.6
 
 来画工具宝

src/App.vue

@@ -21,7 +21,6 @@ export default {
         return {}
     },
     async created() {
-        console.log('this.$http:', this.$http)
         let result = await this.$http.get('/webapi/home/banner?type=1&category=18')
         console.log('result:', result)
     }
@@ -44,5 +43,6 @@ export default {
     flex: 1;
     display: flex;
     justify-content: space-between;
+    overflow: hidden;
 }
 </style>

src/components/videoCutter/videoPlayer.vue

 <template>
     <div class="video-player">
-        <video ref="videoDom" src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4"></video>
+        <video
+            ref="videoDom"
+            src="https://resources.laihua.com/2020-7-27/547adf9b-73b0-4b14-bed6-6ee278a1b2b2.mp4"
+        ></video>
     </div>
 </template>
 <script>

src/registerServiceWorker.js

@@ -5,7 +5,10 @@ import { register } from 'register-service-worker'
 if (process.env.NODE_ENV === 'production') {
     register(`${process.env.BASE_URL}service-worker.js`, {
         ready() {
-            console.log('App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB')
+            console.log(
+                'App is being served from cache by a service worker.\n' +
+                    'For more details, visit https://goo.gl/AFskqB'
+            )
         },
         registered() {
             console.log('Service worker has been registered.')

src/store/global.js

+// 全局vuex信息
+// getter调用示例：this.$store.getters['test']
+
+const state = {
+    _test: 1
+}
+
+const getters = {
+    test: (state) => state._test
+}
+
+const mutations = {}
+
+const actions = {}
+
+export default {
+    state,
+    getters,
+    mutations,
+    actions
+}

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
 
+import global from './global'
+import moduleA from './modules/moduleA'
+
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-    state: {},
-    mutations: {},
-    actions: {},
-    modules: {}
+    ...global,
+    modules: {
+        moduleA
+    }
 })

src/store/modules/moduleA.js

+// 模块化vuex数据
+// getter调用示例：this.$store.getters['moduleA/moduleState']
+
+const state = {
+    _moduleState: 'moduleState'
+}
+
+const getters = {
+    moduleState: (state) => state._moduleState
+}
+
+const mutations = {}
+
+const actions = {}
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    mutations,
+    actions
+}

vue.config.js

+/*
+ * @Date: 2020-08-27 09:05:54
+ * @LastEditors: OBKoro1
+ * @LastEditTime: 2020-08-27 15:30:17
+ * @FilePath: /vue.config.js
+ * @Description: 描述
+ * @Author: huacong
+ * @
+ */
 // console.log(`process.env1:`, process.env);
 console.log(`process.env.NODE_ENV1:`, process.env.NODE_ENV)