feat!: replace vuex with pinia

It's our latest default recommendations for Vue.js state management.

Ref:
* <https://twitter.com/VueDose/status/1463169464451706897>
* <https://www.reddit.com/r/vuejs/comments/r1vluc/new_default_recommendations/hm3wgbj/>

diff --git a/index.js b/index.js
index b05f0b343553c84734739915faf38de0b2999a61..4aeebbe52d23a205e7a2d1a14dacd1fecf1a8194 100755 (executable)
--- a/index.js
+++ b/index.js
@@ -45,7 +45,7 @@ async function init() {
   // --typescript / --ts
   // --jsx
   // --router / --vue-router
-  // --vuex
+  // --pinia
   // --with-tests / --tests / --cypress
   // --force (for force overwriting)
   const argv = minimist(process.argv.slice(2), {
@@ -61,7 +61,7 @@ async function init() {
   // if any of the feature flags is set, we would skip the feature prompts
   // use `??` instead of `||` once we drop Node.js 12 support
   const isFeatureFlagsUsed =
-    typeof (argv.default || argv.ts || argv.jsx || argv.router || argv.vuex || argv.tests) ===
+    typeof (argv.default || argv.ts || argv.jsx || argv.router || argv.pinia || argv.tests) ===
     'boolean'
 
   let targetDir = argv._[0]
@@ -79,7 +79,7 @@ async function init() {
     // - Project language: JavaScript / TypeScript
     // - Add JSX Support?
     // - Install Vue Router for SPA development?
-    // - Install Vuex for state management? (TODO)
+    // - Install Pinia for state management?
     // - Add Cypress for testing?
     result = await prompts(
       [
@@ -141,9 +141,9 @@ async function init() {
           inactive: 'No'
         },
         {
-          name: 'needsVuex',
+          name: 'needsPinia',
           type: () => (isFeatureFlagsUsed ? null : 'toggle'),
-          message: 'Add Vuex for state management?',
+          message: 'Add Pinia for state management?',
           initial: false,
           active: 'Yes',
           inactive: 'No'
@@ -176,7 +176,7 @@ async function init() {
     needsJsx = argv.jsx,
     needsTypeScript = argv.typescript,
     needsRouter = argv.router,
-    needsVuex = argv.vuex,
+    needsPinia = argv.pinia,
     needsTests = argv.tests
   } = result
   const root = path.join(cwd, targetDir)
@@ -212,8 +212,8 @@ async function init() {
   if (needsRouter) {
     render('config/router')
   }
-  if (needsVuex) {
-    render('config/vuex')
+  if (needsPinia) {
+    render('config/pinia')
   }
   if (needsTests) {
     render('config/cypress')
@@ -230,10 +230,10 @@ async function init() {
   render(`code/${codeTemplate}`)
 
   // Render entry file (main.js/ts).
-  if (needsVuex && needsRouter) {
-    render('entry/vuex-and-router')
-  } else if (needsVuex) {
-    render('entry/vuex')
+  if (needsPinia && needsRouter) {
+    render('entry/router-and-pinia')
+  } else if (needsPinia) {
+    render('entry/pinia')
   } else if (needsRouter) {
     render('entry/router')
   } else {

diff --git a/snapshot.js b/snapshot.js
index 06f3e39c87c13e84bc696890578e6b56727d4161..2e47061ab93d8babfe1c147327e1acae64ad2177 100644 (file)
--- a/snapshot.js
+++ b/snapshot.js
@@ -25,7 +25,7 @@ function createProjectWithFeatureFlags(flags) {
   }
 }
 
-const featureFlags = ['typescript', 'jsx', 'router', 'vuex', 'with-tests']
+const featureFlags = ['typescript', 'jsx', 'router', 'pinia', 'with-tests']
 
 // The following code & comments are generated by GitHub CoPilot.
 function fullCombination(arr) {

diff --git a/template/config/pinia/package.json b/template/config/pinia/package.json
new file mode 100644 (file)
index 0000000..a5bf122
--- /dev/null
+++ b/template/config/pinia/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "pinia": "^2.0.4"
+  }
+}

diff --git a/template/config/pinia/src/stores/counter.js b/template/config/pinia/src/stores/counter.js
new file mode 100644 (file)
index 0000000..4a2d242
--- /dev/null
+++ b/template/config/pinia/src/stores/counter.js
@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore({
+  id: 'counter',
+  state: () => ({
+    counter: 0
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2
+  },
+  actions: {
+    increment() {
+      this.counter++
+    }
+  }
+})

diff --git a/template/entry/vuex/src/main.js b/template/entry/pinia/src/main.js
similarity index 64%
rename from template/entry/vuex/src/main.js
rename to template/entry/pinia/src/main.js
index 020a706b8f15c60f6f93d8142a51ab6b49db86ef..5f77a8911f244df66962baf136f53475149b37f4 100644 (file)
--- a/template/entry/vuex/src/main.js
+++ b/template/entry/pinia/src/main.js
@@ -1,9 +1,9 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
-import store from './store'
 
 const app = createApp(App)
 
-app.use(store)
+app.use(createPinia())
 
 app.mount('#app')

diff --git a/template/entry/vuex-and-router/src/main.js b/template/entry/router-and-pinia/src/main.js
similarity index 72%
rename from template/entry/vuex-and-router/src/main.js
rename to template/entry/router-and-pinia/src/main.js
index ab55e6d5fd2ac2e46c22dc557dc27791f66f825a..fda1e6e3e6dc4f11e7f23d3e187d4d541276940f 100644 (file)
--- a/template/entry/vuex-and-router/src/main.js
+++ b/template/entry/router-and-pinia/src/main.js
@@ -1,12 +1,12 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import { createPinia } from 'pinia'
 
+import App from './App.vue'
 import router from './router'
-import store from './store'
 
 const app = createApp(App)
 
+app.use(createPinia())
 app.use(router)
-app.use(store)
 
 app.mount('#app')