chore(dev): vuex 4 demo

Author: Akryum

packages/shell-dev-vue3/package.json

@@ -10,7 +10,8 @@
     "@vue-devtools/shell-host": "^0.0.0",
     "core-js": "^3.6.4",
     "vue": "^3.0.2",
-    "vue-router": "^4"
+    "vue-router": "^4",
+    "vuex": "^4.0.1"
   },
   "devDependencies": {
     "@vue/compiler-sfc": "^3.0.0-beta.15",

packages/shell-dev-vue3/src/App.vue

@@ -85,6 +85,12 @@ export default {
   <inline />
   <global />
 
+  <h2>Store</h2>
+  <div>
+    {{ $store.getters.answer }}
+    {{ $store.getters.twoFoo }}
+  </div>
+
   <nav>
     <router-link to="/p1">
       page 1

packages/shell-dev-vue3/src/main.js

@@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import App from './App.vue'
 import App3 from './App3.vue'
 import TestPlugin from './devtools-plugin'
+import store from './store'
 
 // eslint-disable-next-line no-extend-native
 Array.prototype.foo = 'bar'
@@ -26,8 +27,9 @@ const app = createApp(App)
 app.component('global', {
   render: () => 'I\'m a global component'
 })
-app.use(TestPlugin)
 app.use(router)
+app.use(store)
+app.use(TestPlugin)
 app.mount('#app')
 
 createApp({

packages/shell-dev-vue3/src/store.js

@@ -0,0 +1,51 @@
+import { createStore } from 'vuex'
+
+const store = createStore({
+  state () {
+    return {
+      rootState: 'root'
+    }
+  },
+  getters: {
+    answer: () => 42
+  },
+  modules: {
+    nested: {
+      state () {
+        return {
+          foo: 'bar'
+        }
+      },
+      getters: {
+        twoFoo: state => state.foo.repeat(2)
+      }
+    },
+    namespacedModule: {
+      namespaced: true,
+      state () {
+        return {
+          count: 0
+        }
+      },
+      getters: {
+        doubleCount: state => state.count * 2,
+        tripleCount: state => state.count * 3
+      },
+      modules: {
+        animals: {
+          namespaced: true,
+          state () {
+            return {
+              cat: 'Meow'
+            }
+          },
+          getters: {
+            dog: () => 'Waf'
+          }
+        }
+      }
+    }
+  }
+})
+
+export default store

yarn.lock

@@ -1723,11 +1723,6 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
-"@types/[email protected]":
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"
-  integrity sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==
-
 "@types/webpack-env@^1.15.1":
   version "1.16.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.0.tgz#8c0a9435dfa7b3b1be76562f3070efb3f92637b4"
@@ -4540,11 +4535,6 @@ event-stream@=3.3.4:
     stream-combiner "~0.0.4"
     through "~2.3.1"
 
-[email protected]:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-4.1.2.tgz#0e1a8477af821a6ef3995b311bf74c23a5247f15"
-  integrity sha1-DhqEd6+CGm7zmVsxG/dMI6UkfxU=
-
 eventemitter3@^3.1.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
@@ -9999,11 +9989,6 @@ [email protected], unpipe@~1.0.0:
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
 
-[email protected]:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/untildify/-/untildify-3.0.3.tgz#1e7b42b140bcfd922b22e70ca1265bfe3634c7c9"
-  integrity sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==
-
 upath@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
@@ -10260,6 +10245,13 @@ vuex@^3.4.0:
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
   integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
 
+vuex@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.1.tgz#e83c541d6f31173969efabb2c5d1c465b682887e"
+  integrity sha512-MddakQTAnImDkK1YhEESowKSU5KcjqHH3L1ScPx1lj6NzDDX0FuRBZqJoME5O7/nvj9puudDf6xnWU2w/cqI7g==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.11"
+
 [email protected]:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/wait-on/-/wait-on-5.3.0.tgz#584e17d4b3fe7b46ac2b9f8e5e102c005c2776c7"