.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的过程 如有错误的地方还请大家指正!