feat!: replace vuex with pinia

haoqunjiang · haoqunjiang · commit a88f354cd4f5 · 2021-11-29T16:55:10.000+08:00
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
@@ -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
@@ -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
@@ -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
@@ -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/pinia/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/router-and-pinia/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')

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ function createProjectWithFeatureFlags(flags) {`
`25`	`25`	`}`
`26`	`26`	`}`
`27`	`27`
`28`		`-const featureFlags = ['typescript', 'jsx', 'router', 'vuex', 'with-tests']`
	`28`	`+const featureFlags = ['typescript', 'jsx', 'router', 'pinia', 'with-tests']`
`29`	`29`
`30`	`30`	`// The following code & comments are generated by GitHub CoPilot.`
`31`	`31`	`function fullCombination(arr) {`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +  "dependencies": {
 +    "pinia": "^2.0.4"
 +  }
 +}