vue新一代状态管理插件Pinia

安装pinia

npm install pinia

main.js引入

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
const pinia = createPinia();

const app = createApp(App);
app.use(pinia);
app.mount("#app");

 创建store

/src/store/user.ts

import { defineStore } from 'pinia'

// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
  state: () => {// 其它配置项
    return {
      name: "小猪课堂",
      age: 25,
      sex: "男",
    };
  },

actions: {//actions方法内部的this指向的是当前store
    saveName(name: string) {
      this.name = name;
    },
  },

})

使用store

src/App.vue