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
    评论
Vue3 Pinia是一个基于Vue3的状态管理库,它提供了类似于Vuex的全局状态管理能力,同时使用起来更加简单方便。下面是Vue3 Pinia的使用步骤: 1. 安装Vue3 Pinia 你可以使用npm或者yarn安装Vue3 Pinia: ``` npm install pinia ``` 或者 ``` yarn add pinia ``` 2. 创建Pinia Store 你需要创建一个store来管理你的状态。一个store就是一个拥有状态和操作状态的对象。下面是一个例子: ``` import { defineStore } from 'pinia' export const useCounterStore = defineStore({ id: 'counter', state: () => ({ count: 0 }), actions: { increment() { this.count++ } } }) ``` 这个例子中,我们创建了一个名为useCounterStore的store,它拥有一个状态count,初始值为0,并且有一个操作increment,用来增加count的值。 3. 在Vue组件中使用Store 你可以在Vue组件中使用createPinia函数创建一个Pinia实例,并通过inject注入到组件中。然后就可以通过store来获取状态和操作状态了。下面是一个例子: ``` <template> <div> <p>{{ count }}</p> <button @click="increment">+1</button> </div> </template> <script> import { defineComponent, inject } from 'vue' import { useCounterStore } from './store' export default defineComponent({ setup() { const store = useCounterStore() const count = computed(() => store.count) const increment = () => { store.increment() } return { count, increment } } }) </script> ``` 这个例子中,我们通过useCounterStore函数来获取useCounterStore实例,并且通过computed函数来获取count的值。然后我们在increment函数中调用store的increment方法。 4. 相关问题: 1. Vue3 Pinia与Vuex有什么区别? 2. 如何在多个组件之间共享状态? 3. Vue3 Pinia如何处理异步操作? 4. Vue3 Pinia如何处理模块化?
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值