Pinia All In One

Vuex next version

$ yarn add pinia
# or
$ npm i -S pinia

import { createApp } from 'vue';
import App from './App.vue';

import { createPinia } from 'pinia';

const app = createApp(App);

const pinia = createPinia();

app.use(pinia);

createApp(App).mount('#app');

https://pinia.vuejs.org/getting-started.html

https://github.com/vuejs/pinia

pinia

not exist mutation anymore

https://pinia.vuejs.org/getting-started.html#what-is-a-store

https://pinia.vuejs.org/core-concepts/state.html

https://pinia.vuejs.org/core-concepts/getters.html

https://pinia.vuejs.org/core-concepts/actions.html

demo

# npm 7+, extra double-dash is needed:
$ npm create vite@latest vue3-ts-pinia -- --template vue-ts

$ npm i
npm WARN deprecated @volar/html2pug@0.29.8: WARNING: This project has been renamed to @johnsoncodehk/html2pug. Install using @johnsoncodehk/html2pug instead.
npm WARN deprecated vscode-pug-languageservice@0.29.8: WARNING: This project has been renamed to @volar/pug-language-service. Install using @volar/pug-language-service instead.
npm WARN deprecated vscode-typescript-languageservice@0.29.8: WARNING: This project has been renamed to @volar/typescript-language-service. Install using @volar/typescript-language-service instead.
npm WARN deprecated vscode-vue-languageservice@0.29.8: WARNING: This project has been renamed to @volar/vue-language-service. Install using @volar/vue-language-service instead.

WTF, why need to rename the package?

https://www.npmjs.com/package/@volar/html2pug
https://www.npmjs.com/package/@johnsoncodehk/html2pug

https://www.npmjs.com/package/vscode-pug-languageservice
https://www.npmjs.com/package/vscode-typescript-languageservice
https://www.npmjs.com/package/vscode-vue-languageservice

https://www.npmjs.com/package/@volar/pug-language-service
https://www.npmjs.com/package/@volar/typescript-language-service
https://www.npmjs.com/package/@volar/vue-language-service.

npm deprecated package ???

https://stackblitz.com/github/piniajs/example-vue-3-vite

vue 3.x & pinia & typescript demo

import { defineStore } from 'pinia';

// export declare function defineStore = {}, A = {}>(id: Id, options: Omit, 'id'>): StoreDefinition;

export const appStore = defineStore('appStore', {
  state() {
    return {
      msg: "Hello World!",
    };
  },
  getters: {
    // computed
    getMsg(): string {
      return `?? ${this.msg}`;
    }
  },
  actions: {
    // methods
    updateMsg(str: string) {
      this.msg = str;
    }
  },
});

Vite

# npm 6.x
$ npm create vite@latest vue3-ts-pinia --template vue-ts

# npm 7+, extra double-dash is needed:
$ npm create vite@latest vue3-ts-pinia -- --template vue-ts

# yarn
$ yarn create vite vue3-ts-pinia --template vue-ts

# pnpm
$ pnpm create vite vue3-ts-pinia -- --template vue-ts

$ cd vue3-ts-pinia

$ npm i

$ npm run dev

https://vitejs.dev/

https://github.com/vitejs/vite

https://stackblitz.com/edit/vitejs-vite-qhlzpc?file=vite.config.js&terminal=dev

npm init

npm init [--force|-f|--yes|-y|--scope]
npm init <@scope> (same as `npx <@scope>/create`)
npm init [<@scope>/] (same as `npx [<@scope>/]create-`)

aliases: create, innit

$ npm init vite@latest
# vue3-ts-pinia -- --template vue-ts
      

https://docs.npmjs.com/cli/v8/commands/npm-init

refs

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！