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

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值