| 【Pinia】Pinia的概念、优势及使用方式 | 您所在的位置：网站首页 › 乐器的好处和作用有哪些 › 【Pinia】Pinia的概念、优势及使用方式 |
【Pinia】Pinia的概念、优势及使用方式
|
学习公司的项目，发现用到了Pinia，于是上网学习了一下，发现了一篇比较优秀的文章，于是将极少部分放到此记录学习，原文链接在末尾。 是什么官网解释： Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 从上面官网的解释不难看出，pinia和Vuex的作用是一样的，它也充当的是一个存储数据的作用，存储在pinia的数据允许我们在各个组件中使用。 相较于vuex的优点●Vue2和Vue3都支持，这让我们同时使用Vue2和Vue3的小伙伴都能很快上手。 ●pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，pinia直接抛弃它了，这无疑减少了我们工作量。 ●pinia中action支持同步和异步 ●良好的Typescript支持，毕竟我们Vue3都推荐使用TS来编写，这个时候使用pinia就非常合适了 ●无需再创建各个模块嵌套了，Vuex中如果数据过多，我们通常分模块来进行管理，稍显麻烦，而pinia中每个store都是独立的，互相不影响。 ●体积非常小，只有1KB左右。 ●pinia支持插件来扩展自身功能。 ●支持服务端渲染。 使用 安装 yarn add pinia //或者使用 npm npm install pinia 挂载 // main.ts 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.ts import { defineStore } from 'pinia' // 第一个参数是应用程序中 store 的唯一 id export const useUsersStore = defineStore('users', { // 其它配置项 })创建store很简单，调用pinia中的defineStore函数即可，该函数接收两个参数： ●name：一个字符串，必传项，该store的唯一id。 ●options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。 我们可以定义任意数量的store，因为我们其实一个store就是一个函数，这也是pinia的好处之一，让我们的代码扁平化了，这和Vue3的实现思想是一样的。 使用该store /src/App.vue import { useUsersStore } from "../src/store/user"; const store = useUsersStore(); console.log(store);使用store很简单，直接引入我们声明的useUsersStore 方法即可，我们可以先看一下执行该方法输出的是什么： 添加state我们需要存放的数据就放在options对象中的state属性内。 假设我们往store添加一些任务基本数据，修改user.ts代码。 /src/store/user.ts import { defineStore } from 'pinia' export const useUsersStore = defineStore("users", { state: () => { return { name: "小猪课堂", age: 25, sex: "男", }; }, }); 读取state修改App.vue，通过解构赋值拿取数据，并让这几个数据显示出来。 注意：需要利用pinia的storeToRefs函数，将state中的数据变为响应式。 姓名：{{ name }} 年龄：{{ age }} 性别：{{ sex }} import { ref } from "vue"; import { useUsersStore } from "../src/store/user"; import { storeToRefs } from 'pinia'; const store = useUsersStore(); const { name, age, sex } = storeToRefs(store);结果： 有时候我们修改了state数据，想要将它还原，比如用户填写了一部分表单，突然想重置为最初始的状态。 重置store // 重置store const reset = () => { store.$reset(); }; 批量更改state数据 store.$patch((state) => { state.items.push({ name: 'shoes', quantity: 1 }) state.hasChanged = true }) 替换整个state store.$state = { counter: 666, name: '张三' } 添加getter export const useUsersStore = defineStore("users", { state: () => { return { name: "小猪课堂", age: 25, sex: "男", }; }, getters: { getAddAge: (state) => { return state.age + 100; }, }, }); 使用getter 新年龄：{{ store.getAddAge }} import { useUsersStore } from "../src/store/user"; const store = useUsersStore();直接在标签上使用了store.gettAddAge方法，这样可以保证响应式 getter中调用其它getter export const useUsersStore = defineStore("users", { state: () => { return { name: "小猪课堂", age: 25, sex: "男", }; }, getters: { getAddAge: (state) => { return state.age + 100; }, getNameAndAge(): string { return this.name + this.getAddAge; // 调用其它getter }, }, }); getter传参 export const useUsersStore = defineStore("users", { state: () => { return { name: "小猪课堂", age: 25, sex: "男", }; }, getters: { getAddAge: (state) => { return (num: number) => state.age + num; }, getNameAndAge(): string { return this.name + this.getAddAge; // 调用其它getter }, }, }); 新年龄：{{ store.getAddAge(1100) }} 添加actions export const useUsersStore = defineStore("users", { state: () => { return { name: "小猪课堂", age: 25, sex: "男", }; }, actions: { saveName(name: string) { this.name = name; }, }, }); 使用actions //app.vue const saveName = () => { store.saveName("我是小猪"); }; 汇总代码main.ts代码： 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");user.ts代码： import { defineStore } from "pinia"; // 第一个参数是应用程序中 store 的唯一 id export const useUsersStore = defineStore("users", { state: () => { return { name: "小猪课堂", age: 25, sex: "男", }; }, getters: { getAddAge: (state) => { return (num: number) => state.age + num; }, getNameAndAge(): string { return this.name + this.getAddAge; // 调用其它getter }, }, actions: { saveName(name: string) { this.name = name; }, }, });App.vue代码： 姓名：{{ name }} 年龄：{{ age }} 性别：{{ sex }} 新年龄：{{ store.getAddAge(1100) }} 调用其它getter：{{ store.getNameAndAge }} 更改姓名 重置store 批量修改数据 调用aciton import child from "./child.vue"; import { useUsersStore } from "../src/store/user"; import { storeToRefs } from "pinia"; const store = useUsersStore(); const { name, age, sex } = storeToRefs(store); const changeName = () => { store.name = "张三"; console.log(store); }; // 重置store const reset = () => { store.$reset(); }; // 批量修改数据 const patchStore = () => { store.$patch({ name: "张三", age: 100, sex: "女", }); }; // 调用actions方法 const saveName = () => { store.saveName("我是小猪"); };原文： 大菠萝！这一次彻底搞懂Pinia！（保姆级教程） |
【本文地址】