Pinia 手册

已于 2022-12-20 00:06:54 修改
阅读量541 收藏 1
点赞数
文章标签： javascript vue.js 前端
于 2022-10-26 16:36:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61565612/article/details/127529438
版权

文章目录

一、安装

  • npm:
 >  npm install pinia
  • yarn:
 >  yarn add pinia

如果没有安装 yarn ，可以点击此处

二、项目引入

// 文件：main.ts 或 main.js

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";

const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount("#app");

把代码块内容复制到目标文件里面就好

三、Store

创建

// 文件：/src/store/user.js

import { defineStore } from 'pinia'

// 第一个参数是应用程序中 store 的唯一 id
// 定义store的固定格式为 usexxxStore
export const useUsersStore = defineStore('users', {
  // 其它配置项
})
  1. 在项目src目录下新建store文件夹，用来存放我们创建的各种store，然后在该目录下新建user.ts文件，主要用来存放与user相关的store。
  2. 第一个参数是应用程序中 store 的唯一 id
  3. 定义store的固定格式为 usexxxStore ，xxx： 通常为第一个参数

使用

<script setup>
// 引入函数
import { useUsersStore } from "../store/user";
// 创建函数实例
const store = useUsersStore();
console.log(store);
</script>

四、属性

state

创建

import { defineStore } from 'pinia'

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "小张",
      age: 25,
      sex: "男",
    };
  },
});

使用

<template>
  <h1>直接调用</h1>
  <p>姓名：{{ store.name }}</p>
  <p>年龄：{{ store.age }}</p>
  <p>性别：{{ store.sex }}</p>
  
  <h1>解析后使用</h1>
  <p>姓名：{{ store.name }}</p>
  <p>年龄：{{ store.age }}</p>
  <p>性别：{{ store.sex }}</p>
</template>
<script setup >
// 引入函数
import { useUsersStore } from "../store/user";
// 引入 storeToRefs 函数
import {storeToRefs} for 'pinia'
// 创建实例
const store = useUsersStore();
// 需要用 storeToRefs 进行解析，否则会失去响应式
// 等同 vue 中的 toRefs()
 const { name, age, sex } = storeToRefs(store); 

console.log(store.$state)
</script>
  1. 如果我们想要修改store中的数据，可以直接重新赋值即可
  2. 如果在 script 标签里面调用，需要在调用 属性/函数 前面加 $
    注意： 你不能完全替换掉 store 的 state，因为那样会破坏其响应性

方法

// 重置store
store.$reset() 
 
// 批量修改数据
store.$patch({ 
    name: "张三",
    age: 100,
    sex: "女",
});
// $patch 方法也接受一个函数来组合这种难以用补丁对象实现的变更。
cartStore.$patch((state) => { 
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

// 替换整个state对象
store.$state = { 
	counter: 666, 
	name: '张三' 
}
// 你不能完全替换掉 store 的 state，因为那样会破坏其响应性。但是，你可以 patch 它。
// 这实际上并没有替换`$state`
store.$state = { count: 24 }
// 在它内部调用 `$patch()`：
store.$patch({ count: 24 })

getter

创建

import { defineStore } from 'pinia'

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "小张",
      age: 25,
      sex: "男",
    };
  },
  getters: {
  // 如果需要 state 中的值，需要把 state当参数传进去
    getAddAge: (state) => {
      return state.age + 100;
    },
  },
});
  1. 可以理解成 vue 中的 计算属性
  2. 推荐使用 箭头函数
  3. 默认接收 state 做为第一个参数
  4. getters 内函数本身不接收参数，可以通过返回一个函数来接收参数,但此getter将不被缓存
  5. 在setup组件内可以像访问state属性一样访问getter
// 如果用 this 调用，需要改为函数
  getNum:function() {
            return + this.age + 100;
  }

注意： 如果需要 state 中的值，需要把 state当参数传进去

使用

<template>
  <p>新年龄：{{ store.getAddAge }}</p>
</template>
<script setup>
import { useUsersStore } from "../src/store/user";
const store = useUsersStore();
</script>

getter中调用其他getter

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "小张",
      age: 25,
      sex: "男",
    };
  },
  getters: {
    getAddAge: (state) => {
      return state.age + 100;
    },
    // js
     getNameAndAge: function(){
      return this.name + this.getAddAge; // 调用其它getter
    },
    // ts
    getNameAndAge(): string {
      return this.name + this.getAddAge; // 调用其它getter
    },
  },
});

getter传参

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      age: 25,
    };
  },
  getters: {
    getAddAge: (state) => {
      return (num) => state.age + num;
    },
  },
});

如需要传参需要在 return 里面添加一个 箭头函数 进行传参

actions

创建

import { defineStore } from 'pinia'

export const useUsersStore = defineStore("users", {
  state: () => {
    return {
      name: "小张",
    };
  },
  actions: {
    saveName(name) {
      this.name = name;
    },
  },
});
  1. 可以理解为 vue 中的 methods
  2. 可以通过 this 访问整个 store 实例
  3. 我们可以在这个方法做一些事情，如：修改 state 里的值
  4. 可以在一个actions内直接访问其它store的actions

使用

<template>
    <button @click="saveName">点击之后修改name</button>
</template>
<script setup>
import { useUsersStore } from "../src/store/user";
const saveName = () => {
  store.saveName("我是小张");
};
</script>

五、Pinia-模块化

创建

// 文件：store/user.js 用户文件

import { defineStore } from 'pinia'

const userStore = defineStore("user", {
    state: () => {
        return {
            name: "小张",
        };
    },
});
export default userStore

// 文件: store/goods.js 商品文件

import { defineStore } from 'pinia'

const userStore = defineStore("goods", {
    state: () => {
        return {
            name: "玩具",
        };
    },
});
export default userStore

// 文件: store/index.js 主文件

// 把需要的 store 文件引入
import user from "./user";
import goods from "./goods";

// 统一使用 usersStore 方法
export default function usersStore() {
    return {
    // 必须要函数形式调用一下
        user:user(),
        goods:goods()
    }
}
  1. 把一个 Store 放在一个文件里面
  2. 之后创建一个主文件一起导出

使用

<template>
    <div id='item'>
        <h1>{{ user.name }}</h1>
        <h1>{{ goods.name }}</h1>
    </div>
</template>
<script setup>
// 引入 主文件
import usersStore from '../store'

// 解析成单个的 Store 文件
const { user, goods } = usersStore()
</script>
<style  scoped>
/* #item {	} */
</style>

六、Pinia-持久化存储

安装

  • npm:
 >  npm install pinia-plugin-persistedstate
  • yarn
 > yarn add pinia-plugin-persistedstate
  • pnpm:
 >  pnpm install  pinia-plugin-persistedstate

创建

// 文件 main.js

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
  1. 需要先在 main.js 文件中注册

使用

import { defineStore } from 'pinia'

const usersStore = defineStore("goods", {
    state: () => {
        return {
            name: "苹果",
            price: '14'
        };
    },
    // 所有数据持久化
    persist:true
});
export default usersStore;
  1. 默认会将数据存储到本地

属性

import { defineStore } from 'pinia'

const usersStore = defineStore("goods", {
    state: () => {
        return {
            name: "苹果",
            price: '14'
        };
    },
    persist: {
	   // enabled ：数据是否持久化
	   // 参数: true false
        enabled: true,
        
      // key: 存储的名字,默认为当前 Store的 id
        key: 'goods',
       
       // strategies: 存储数据的位置,默认为 localStorage
       // 参数：localStorage  sessionStorage，
        strategies: sessionStorage,

		// paths : 表示数据持久状态的数组。
		// 参数:
			// []: 表示没有数据被持久化
			// undefined或null: 表示整个数据被持久。
			// ['name']: 表示只将 name 数据持久化
		paths: []
    }
});
export default usersStore;

按需存储数据位置

import { defineStore } from 'pinia'

const userStore = defineStore("goods", {
    state: () => {
        return {
            fruit: "苹果",
            price: '14'
        };
    },
    persist: {
        enabled: true,
        key: 'goods',
        strategies: [
            { key: 'fruit', storage: sessionStorage, paths: ['fruit'] },
            { key: 'price', storage: localStorage, paths: ['price'] }
        ],
    }
});

export default userStore;

七、相关网址

Pinia Api

点击跳转 Pinia Api

pinia-plugin-persistedstate

点击跳转

渡劫皆是赌
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【一文搞定Pinia】超详细的Pinia教程，比Vuex香太多了！
有事儿私信。
12-10 1万+
伴随vue2到vue3的升级，官方已经用Pinia代替了Vuex成为官方的状态管理库，推荐使用Pinia作为以后不论是vue2还是vue3状态管理库的首选！
Pinia的安装与使用 【全网最简洁】
qq_47945175的博客
03-23 2481
Pinia是Vue.js 3的状态管理库，使用起来非常简单和直观。
Pinia的简单使用
YY11230的博客
02-01 240
Pinia的简单使用
pnpm+vue3+vite+pinia+router框架搭建
CycleByle的博客
02-10 331
pnpm+vue3+vite+pinia+router框架搭建
Pinia使用方法及持久化存储
热门推荐
前端学习笔记
03-24 1万+
Pinia是Vue的专属状态管理库，它允许你跨组件或页面共享状态。它跟Vuex有一定的相似度，但还是有很大的区别。愿意看这篇博客的人，想必已经看过了官方文档，官方文档很详细，包含各种使用情景和理论，因此本文不说理论，只说具体的使用方法，想深入研究的建议去看官方文档，本文适合拿来即用。Pinia 官方文档。
大壮考了小帅 5 道 Pinia 必问面试题
07-06
解锁Pinia框架的实力：5道必问面试题及资源下载
vue3+pinia 面向app项目
最新发布
04-13
vue3+pinia+vant+axios+vue-router 面向app项目，创建单独的登录页面信息以及相关request接口请求。这是一个简单的demo
vite-vue-ts精简模版集成pinia+svg+router+@src
03-22
本源码已经调试通过 集成 Vite-vue-ts 集成pinia+svg+router+@src axios, mock
pinia学习笔记pinia学习笔记
03-15
pinia学习笔记pinia学习笔记
Pinia快速入门.pdf
09-06
本资源可以搭配博客Pinia快速入门适用更加，该文档为博客Pinia快速入门的pdf版，可以方便大家随时随地无网络观看，也可以助力大家可以更快速的掌握这个新的技术
四、Pinia 的安装及其基本使用
qq_43683753的博客
10-27 1060
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。
pinia的基本使用和核心实现原理
小陈的博客
08-11 3827
vuex缺点：ts兼容性不好、命名空间的缺陷、只能有一个store、mutation和actionpinia 优点：ts兼容性好 、不需要命名空间，可以创建多个store、mutation删掉了pinia只具备以下几个属性，状态、计算属性、动作pinia大小也会更小巧一些actions里面有this问题，所以我们要处理actions的方法里的this般不用高级语法的话，可以直接写成对象格式也就是optionsStore，更符合类似于vuex的语法。...
Pinia 状态管理的数据持久化 （pinia-plugin-persistedstate）
m0_63108819的博客
12-19 7773
Pinia 状态管理的数据持久化 推荐使用（pinia-plugin-persistedstate） pinia-plugin-persist也可以，但是有一些bug 。
看完这篇Pinia上手指南，你还会选择Vuex吗？
ilovely_的博客
02-25 774
Vuex作为Vue前端框架官宣的状态管理工具，一直在与时俱进。然而其繁琐的actions、mutations以及模块嵌套一直饱受开发者诟病，我们始终期待着使用一款简洁的状态管理器。而Pinia的出现，去掉了模块的多层嵌套，移除了复杂的mutation操作，极大地满足了我们的诉求。
如何通过pinia-plugin-persistedstate实现数据持久化？
weixin_48082900的博客
06-29 1187
pinia配套的本地存储插件pinia-plugin-persistedstate的详细使用步骤
pinia的基本使用
weixin_48567214的博客
03-16 159
import {return {// 也可以定义为如果你还不熟悉 setup() 和 Composition API，别担心，Pinia 也支持一组类似的 map helpers likeVuex。
pinia的具体使用方法
zsj702177的博客
02-23 2761
pinia的具体使用方法 1.安装(pinia支持Vue2和Vue3) 安装需要@next因为pinia2处于beta的阶段,pinia2是对应的Vue3的版本 //使用npm npm install pinia@next //使用yarn yarn add pinia@next 2.核心概念与基本使用 Store是一个保存状态和业务逻辑的实体，可以自由的读取和写入，并且通过导入setup中使用 创建一个store import { defineStore } from 'pinia' //定义容器 /
Pinia——Getters
weixin_44732078的博客
09-14 1331
Getter 完全等同于 Store 状态的计算值，在 defineStore() 中的 getters 属性中定义当它接收“状态”作为第一个参数时，鼓励箭头函数的使用getter 只会依赖状态，可能会使用到其他 getter，因此可以在定义常规函数时通过 this 访问到整个 store 的实例// 自动将返回类型推断为 Number// 返回类型必须明确设置在使用 this 访问时，需要定义返回类型（在 TypeScript 中），这是因为 TypeScript 中的一个已知限制。
typescript pinia
04-10
TypeScript Pinia是一个用于Vue.js的状态管理库，它基于Vue 3的新特性Composition API开发。Pinia提供了一种简单、直观的方式来管理应用程序的状态，并且具有类型安全性和良好的开发体验。 Pinia的核心概念是store...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值