Vue3的pinia安装以及简单的使用示例

.pinia的安装：

npm install pinia

 创建一个store ：

 

在main.ts文件里引入Pinia 下方代码还有另外的引入导出

比如ElementPlus，router

ps:红色的下划线不是报错 是插件导致的误报

代码如下：

 

import { createApp } from 'vue'

import './style.css'

import App from './App.vue'

import "element-plus/theme-chalk/index.css";

import ElementPlus from "element-plus";

import "@element-plus/icons-vue";

import { createPinia } from 'pinia';

import router from './router';



const pinia = createPinia();

const app = createApp(App);

app.use(router);

app.use(pinia);

app.use(ElementPlus);



app.mount("#app");

引入后，通过createPinia( )方法，得到pinia的实例，然后将Pinia挂载到Vue根实例上。

2.创建store状态管理库 直接在/src目录下，新建一个store文件夹。有了文件夹之后，再创建一个index.ts文件。

定义状态容器(仓库) 修改容器(仓库)中的 state 仓库中的 action 的使用

定义状态容器(仓库)

 代码如下：

import { defineStore } from "pinia";

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const userStore = defineStore({
  // 用来存储全局数据
  id: "usestore",
  state: () => ({
    title: "hello world",
    name: "安安",
    age: 18,
    school: {
      name: "嗷嗷",
      age: 15,
      errs: "保安",
    },
  }),
  //   用来监视或者说是计算状态的变化的，有缓存的功能。
  getters: {},
  //   对state里数据变化的业务逻辑，就是修改state全局状态数据的。
  actions: {},
});

在组件中使用pinia：

代码如下：

<template>
  <div>
    <h1>pinia的使用</h1>
    <p>
      <label for="">姓名</label>
      <el-input v-model="store.name" />
    </p>
  </div>
</template>

<script setup>
import { userStore } from "../store/user";

const store = userStore();

//对于值类型的解构是不具有响应式的
// const { name } = store;
//解构的是应用类型，是具有响应式的
// const { school } = store;

//计算属性是只读的，不能通过组件的v-model进行修改，如果先需要填写，那么要做成读写的计算属性

//用storeToRefs可以直接获取到一个集合 命名pinia中的key就可以使用指定的数据
// const { title } = storeToRefs(store);
// console.log(title);

//修改state
function changeState() {
  //直接修改
  // store.title = "hello Pinia";
  // store.name = "钱七";
  // store.age = 10;
  //使用$patch修改
  store.$patch({
    title: "hello Pinia",
    name: "钱七",
    age: 8,
  });
}
</script>

 这只是一个简单使用pinia的过程 如有错误的地方还请大家指正！