From a88f354cd4f5572cf951c0a2833142c5e23190c8 Mon Sep 17 00:00:00 2001
From: Haoqun Jiang <haoqunjiang@gmail.com>
Date: Mon, 29 Nov 2021 16:55:10 +0800
Subject: [PATCH] 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/>
---
 index.js                                      | 24 +++++++++----------
 snapshot.js                                   |  2 +-
 template/config/pinia/package.json            |  5 ++++
 template/config/pinia/src/stores/counter.js   | 16 +++++++++++++
 template/entry/{vuex => pinia}/src/main.js    |  4 ++--
 .../src/main.js                               |  6 ++---
 6 files changed, 39 insertions(+), 18 deletions(-)
 create mode 100644 template/config/pinia/package.json
 create mode 100644 template/config/pinia/src/stores/counter.js
 rename template/entry/{vuex => pinia}/src/main.js (64%)
 rename template/entry/{vuex-and-router => router-and-pinia}/src/main.js (72%)

diff --git a/index.js b/index.js
index b05f0b34..4aeebbe5 100755
--- 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 06f3e39c..2e47061a 100644
--- 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
index 00000000..a5bf122d
--- /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
index 00000000..4a2d2427
--- /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 020a706b..5f77a891 100644
--- 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 ab55e6d5..fda1e6e3 100644
--- 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')
-- 
2.39.5