feat: 增加 vuex case

empjs · Aug 9, 2022 · 82ec73f · 82ec73f
1 parent 2b2ca47
commit 82ec73f
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 47 deletions.
diff --git a/projects/vue-2-base/emp-config.js b/projects/vue-2-base/emp-config.js
@@ -3,8 +3,8 @@ const {defineConfig, empStore} = require('@efox/emp')
 const esm = (name, mode, version) =>
   `https://esm.sh/${name}${version ? '@' + version : ''}${mode === 'development' ? '?dev' : ''}`
 module.exports = defineConfig(({mode, env}) => {
-  const target = 'es2018'
-  // const target = 'es5'
+  // const target = 'es2018'
+  const target = 'es5'
   const isESM = !['es3', 'es5'].includes(target)
   return {
     plugins: [vue2],
@@ -21,25 +21,28 @@ module.exports = defineConfig(({mode, env}) => {
         './Content': './src/components/Content',
         './Table': './src/components/table',
         './CompositionApi': './src/components/CompositionApi',
+        './store': './src/store/index',
       },
       // shared: ['vue', 'element-ui', 'vue-router'],
-      shared: {
-        vue: {requiredVersion: '^2.0.0'},
-        'element-ui': {requiredVersion: '^2.0.0'},
-        'vue-router': {requiredVersion: '^3.0.0'},
-      },
-      // shareLib: !isESM
-      //   ? {
-      //       vue: 'Vue@https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
-      //       'element-ui': [
-      //         'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
-      //         `https://unpkg.com/element-ui/lib/theme-chalk/index.css`,
-      //       ],
-      //     }
-      //   : {
-      //       vue: esm('vue'),
-      //       'element-ui': esm('element-ui'),
-      //     },
+      // shared: {
+      //   vue: {requiredVersion: '^2.0.0'},
+      //   'element-ui': {requiredVersion: '^2.0.0'},
+      //   'vue-router': {requiredVersion: '^3.0.0'},
+      // },
+      shareLib: !isESM
+        ? {
+            vue: 'Vue@https://unpkg.com/vue@2.6.14/dist/vue.min.js',
+            vuex: `Vuex@https://unpkg.com/vuex@3.6.2/dist/vuex.min.js`,
+            'element-ui': [
+              'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
+              `https://unpkg.com/element-ui/lib/theme-chalk/index.css`,
+            ],
+          }
+        : {
+            vue: esm('vue'),
+            vuex: esm('vuex'),
+            'element-ui': esm('element-ui'),
+          },
     },
   }
 })
diff --git a/projects/vue-2-base/src/bootstrap.js b/projects/vue-2-base/src/bootstrap.js
@@ -1,5 +1,9 @@
 import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+import store from '@/store'
 import App from '@/App'
+
 // composition-api shareLib 可以不操作
 import VueCompositionAPI from '@vue/composition-api'
 Vue.use(VueCompositionAPI)
@@ -18,5 +22,6 @@ Vue.config.productionTip = false
 
 new Vue({
   router,
+  store,
   render: h => h(App),
 }).$mount('#emp-root')
diff --git a/projects/vue-2-base/src/components/Content.vue b/projects/vue-2-base/src/components/Content.vue
@@ -1,12 +1,23 @@
 <template>
   <div>
-    <div class="v2box">{{ title }}</div>
-    <button class="button" @click="add">Vue2 Add Button</button>
-    <div class="v2box">Prop: {{ dataProps }}</div>
-    <p>============ button component start =============</p>
-    <Button text-val="button components in content from import" />
-    <DynamicButton text-val="dynamic import" />
-    <p>============ button component end =============</p>
+    <button class="button bigSize" @click="increment">Vuex Store : {{ $store.state.count }}</button>
+    <p @click="showMore">More...</p>
+    <div class="more">
+      <ul v-if="isMore === true">
+        <li>
+          <button class="button" @click="increment">Vuex Store : {{ $store.state.count }}</button>
+        </li>
+        <li>
+          <h2>{{ title }}</h2>
+          <button class="button" @click="add">Vue2 Add Button</button>
+        </li>
+        <li>
+          <h2>prop: {{ dataProps }}</h2>
+          <Button text-val="button components in content from import" />
+          <DynamicButton text-val="dynamic import" />
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -23,6 +34,7 @@ export default {
   },
   data() {
     return {
+      isMore: false,
       title: 'EMP Vue2 Component From BASE!',
     }
   },
@@ -33,6 +45,13 @@ export default {
     // console.log(this.$listeners)
   },
   methods: {
+    showMore() {
+      this.isMore = !this.isMore
+    },
+    increment() {
+      this.$store.commit('increment')
+      // console.log(this.$store.state.count)
+    },
     add() {
       console.log('click event')
       // Vue2 使用 Vue3 传过来的自定义事件需要把函数名 kebab-case 改为 camelCase 再加前缀 on
@@ -43,7 +62,25 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
+.button.bigSize {
+  font-size: 30px;
+  width: auto;
+  padding: 3px 8px;
+}
+.more {
+  ul,
+  li {
+    list-style: none;
+    button {
+      width: auto;
+      padding: 3px 8px;
+    }
+  }
+  h2 {
+    font-size: 14px;
+  }
+}
 .v2box {
   font-size: 38px;
   color: green;

diff --git a/projects/vue-2-base/src/store/index.js b/projects/vue-2-base/src/store/index.js
@@ -0,0 +1,12 @@
+import Vuex from 'vuex'
+export const countStore = new Vuex.Store({
+  state: {
+    count: 0,
+  },
+  mutations: {
+    increment(state) {
+      state.count++
+    },
+  },
+})
+export default countStore
diff --git a/projects/vue-2-project/emp-config.js b/projects/vue-2-project/emp-config.js
@@ -1,6 +1,7 @@
 const {defineConfig} = require('@efox/emp')
 const vue = require('@efox/plugin-vue-2')
-const target = 'es2018'
+// const target = 'es2018'
+const target = 'es5'
 const isESM = !['es3', 'es5'].includes(target)
 module.exports = defineConfig({
   plugins: [vue],
@@ -14,23 +15,25 @@ module.exports = defineConfig({
       '@v2b': 'vue2Base@http://localhost:9001/emp.js',
     },
     // shared: ['vue/dist/vue.esm.js', 'element-ui'],
-    shared: {
-      vue: {requiredVersion: '^2.0.0'},
-      'element-ui': {requiredVersion: '^2.0.0'},
-      'vue-router': {requiredVersion: '^3.0.0'},
-    },
-    // shareLib: !isESM
-    //   ? {
-    //       vue: 'Vue@https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js',
-    //       'element-ui': [
-    //         'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
-    //         `https://unpkg.com/element-ui/lib/theme-chalk/index.css`,
-    //       ],
-    //     }
-    //   : {
-    //       vue: esm('vue'),
-    //       'element-ui': esm('element-ui'),
-    //     },
+    // shared: {
+    //   vue: {requiredVersion: '^2.0.0'},
+    //   'element-ui': {requiredVersion: '^2.0.0'},
+    //   'vue-router': {requiredVersion: '^3.0.0'},
+    // },
+    shareLib: !isESM
+      ? {
+          vue: 'Vue@https://unpkg.com/vue@2.6.14/dist/vue.min.js',
+          vuex: `Vuex@https://unpkg.com/vuex@3.6.2/dist/vuex.min.js`,
+          'element-ui': [
+            'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
+            `https://unpkg.com/element-ui/lib/theme-chalk/index.css`,
+          ],
+        }
+      : {
+          vue: esm('vue'),
+          vuex: esm('vuex'),
+          'element-ui': esm('element-ui'),
+        },
   },
   /*
   async moduleFederation() {

diff --git a/projects/vue-2-project/src/App.vue b/projects/vue-2-project/src/App.vue
@@ -3,8 +3,10 @@
     <h1>Project App ! vue 2 project</h1>
     <h2>Content</h2>
     <Content />
-    <h2>CompositionApi</h2>
+    <!-- <h2>CompositionApi</h2> -->
     <!-- <CompositionApi /> -->
+    <h2>Table</h2>
+    <Table />
   </div>
 </template>
 
@@ -13,6 +15,7 @@
 export default {
   components: {
     Content: () => import('@v2b/Content'),
+    Table: () => import('@v2b/Table'),
     // CompositionApi: () => import('@v2b/CompositionApi'),
   },
 }

diff --git a/projects/vue-2-project/src/bootstrap.js b/projects/vue-2-project/src/bootstrap.js
@@ -1,12 +1,16 @@
 import Vue from 'vue'
 import App from './App'
-
+import Vuex from 'vuex'
+Vue.use(Vuex)
+import store from '@v2b/store'
+console.log('store', store)
 Vue.config.productionTip = false
 //
 // import VueCompositionAPI from '@vue/composition-api'
 // Vue.use(VueCompositionAPI)
 //
 
 new Vue({
+  store,
   render: h => h(App),
 }).$mount('#emp-root')