【Pinia】小菠萝的使用

小花睡不醒

已于 2023-04-01 18:19:25 修改

阅读量221

点赞数

分类专栏：笔记前端文章标签： vue.js 前端 javascript

于 2023-03-19 22:41:35 首次发布

本文链接：https://blog.youkuaiyun.com/m0_62811051/article/details/129650741

版权

前端同时被 2 个专栏收录

15 篇文章

订阅专栏

笔记

13 篇文章

订阅专栏

文章介绍了Pinia的状态管理库的安装步骤，如何在Vue应用中创建和使用Piniastore，以及实现数据持久化的方法。Pinia相比Vuex提供了更简洁的API，支持组合式API，且无需mutations，模块化处理更直观，同时体积更小，性能优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. Pinia安装

命令安装

yarn add pinia
# or with npm
npm install pinia

二. 使用Pinia

1. main.js引入并挂载

import { createPinia } from 'pinia'
 
app.use(createPinia())

2. 在store包下建index.js

写入

import { defineStore } from 'pinia'
 
//1.定义并导出容器
//参数1：容器的ID.必须唯一，将来Pinia会把所有的容器挂载到根容器
//参数2：选项对象
//返回值：一个函数，调用得到容器实例
export const useStore = defineStore('storeId', {
    /**
     *  类似于组建的data，用来储存全局状态
     * 1.必须是函数，这样为了在服务端渲染的时候避免交叉请求导致的数据状态太污染
     * 2.必须是箭头函数，为了更好的TS类型推导
     */
  state: () => {
    return {
      username:'张三',
      phone:'1734985035',
      createTime:'2004-05-12',
      updateTime:'2023-01-04',
    }
  },
  /**
   * 类似于组件的computed，用来封装计算属性，有缓存的功能
   */
  getters:{},
  /**
   * 类似于组建的methods，封装业务逻辑，修改state
   */
  actions:{}
})

3.然后在页面中引入store，使用pinia。

<template>
  <h3>pinia</h3>
  <!-- 在页面中直接使用就可以了 -->
  <p>pinia 中的信息： {{store.username}} --- {{store.phone}}</p>
  <!-- 下面这种调用方法也可以 -->
  <p>{{createTime}}<p>
</template>
<script setup>
  // 首先需要引入一下我们刚刚创建的store
  import  { useStore }  from '../store';
  // 因为是个方法，所以我们得调用一下
  const store = useStore();
  console.log(store)
  let {username,phone,createTime,updateTime} = store
</script>
<style scoped>

</style>

输出信息如下：

页面刷新后，数据会重置，安装类似vuex- persistdstate的pinia插件解决。

三.持久化存储

安装插件

npm install pinia-persistedstate-plugin

2. 插件如果放在全局维护起来比较差，所以对之前的main.js进行更改，改回引用store文件夹

import store from './store'
app.use(store)

原本的store/index.js划分为user模块改名为user.js，store/index.js中内容更改更改

import { createPinia } from "pinia";

//引入插件
import { createPersistedState } from "pinia-persistedstate-plugin";

const store = createPinia();

//使用插件
store.use(createPersistedState());

export { store };

Vuex与Pinia的区别：