pinia的简单用法

最新推荐文章于 2024-04-02 15:34:58 发布
最新推荐文章于 2024-04-02 15:34:58 发布
阅读量2.9k 收藏 8
点赞数 6
分类专栏： pinia 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51173554/article/details/128205298
版权

目录

1、vuex和pinia的区别

2、pinia官方地址

3、基本使用

 4.Pinia模块相互调用

5.Pinia持久化

1、vuex和pinia的区别

1、pinia没有mutations，只有: state、getters、actions（vuex有mutations）

2、pinia分模块不需要modules（vuex分模块需要modules）

3、pinia体积更小（性能更好）

4、pinia可以直接修改state数据（vuex还需要通过mutations来进行修改）

2、pinia官方地址

https://pinia.vuejs.org

3、基本使用

  1. 安装一个vue3项目
  2. 安装pinia 
    yarn add pinia // 本人习惯用yarn 可以用其他安装方式
  3. 在main.js中进行挂载 
    // src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";

const pinia = createPinia();

createApp(App).use(pinia).use(router).mount("#app");
  4. 创建store 
    // src/store/index.js
import { defineStore } from "pinia";

export const useStore = defineStore("main", {
  state: () => {
    return {
      num: 0,
      name: "Eduardo",
    };
  },
  getters: {},
  actions: {},
});
  5. 在文件中使用 
    <template>
  <div class="hello">
    <h1>组件A</h1>
    {{ store.name }}
    {{ store.num }}
  </div>
</template>

<script setup>
import { useStore } from "../store";
const store = useStore();
console.log(store)
</script>

<style scoped></style>
  6. 组件修改pinia中的state数据（pinia可以直接修改state数据-不需要和vuex一样通过mutations来修改-但是通过ES6解构拿值是不行的，结构出来的数据不是响应式） 
    ​
<template>
  <div class="hello">
    <h1>组件A</h1>
    {{ name }}
    {{ num }}
    <button @click="changeName">修改名称</button>
  </div>
</template>

<script setup>
import { useStore } from "../store";
import { storeToRefs } from "pinia";
const store = useStore();
console.log(store);
let { name, num } = store;
const changeName = () => {
  name.value = "里斯";
};
</script>

<style scoped>
</style>

​

     解决--<import { storeToRefs } from "pinia";>

    <template>
  <div class="hello">
    <h1>组件A</h1>
    {{ name }}
    {{ num }}
    <button @click="changeName">修改名称</button>
  </div>
</template>

<script setup>
import { useStore } from "../store";
import { storeToRefs } from "pinia";
const store = useStore();
console.log(store);
let { name, num } = storeToRefs(store); // 不能用ES结构来写pinia中的state值 引入pinia中的storeTorefs
const changeName = () => {
  name.value = "里斯";
};
</script>

<style scoped></style>

  7. pinia数据需要批量更新 
    // store/index.js
import { defineStore } from "pinia";

export const useStore = defineStore("main", {
  state: () => {
    return {
      num: 0,
      name: "Eduardo",
      arr: [1, 2],
    };
  },
  getters: {},
  actions: {},
});

//---------------------------------------------------------------------------
// 组件中
<template>
  <div class="hello">
    <h1>组件A</h1>
    {{ name }}
    {{ num }}
    {{ arr }}
    <button @click="changeName">修改名称</button>
  </div>
</template>

<script setup>
import { useStore } from "../store";
import { storeToRefs } from "pinia";
const store = useStore();
console.log(store);
let { name, num, arr } = storeToRefs(store); 
const changeName = () => {
  // name.value = "里斯";

  // 批量更新
  store.$patch((state) => {
    state.num++;
    state.name = "rous";
    state.arr.push(4);
  });
};
</script>

<style scoped></style>

  8. pinia中的getters（Pinia 中的 getter 和 Vue 中的计算属性几乎一样，在获取 State值之前做一些逻辑处理。getter中的值有缓存特性，如果值没有改变，多次使用也只会调用一次） 
    // store/index.js---添加getters方法
import { defineStore } from "pinia";

export const useStore = defineStore("main", {
  state: () => {
    return {
      num: 0,
      name: "Eduardo",
      arr: [1, 2],
    };
  },
  getters: {  // getter 中不仅可以传递 state 直接改变数据状态，还可以使用 this 来改变数据
    changeNum() {
      console.log("getters");
      return this.num + 1000;
    },
//  changeNum(state) {
//    return state.num + 1000;
//  }
  },
  actions: {},
});


// 组件内  多次调用
<template>
  <div class="hello">
    {{ changeNum }}
    {{ changeNum }}
    {{ changeNum }}
    {{ changeNum }}
    <h1>组件A</h1>
    {{ name }}
    {{ num }}
    {{ arr }}
    <button @click="changeName">修改名称</button>
  </div>
</template>

<script setup>
import { useStore } from "../store";
import { storeToRefs } from "pinia";
const store = useStore();
console.log(store);
let { name, num, arr, changeNum } = storeToRefs(store); 
const changeName = () => {
  // name.value = "里斯";

  // 批量更新
  store.$patch((state) => {
    state.num++;
    state.name = "rous";
    state.arr.push(4);
  });
};
</script>

<style scoped></style>
    ​​​​​​​

 9.pinia中actions的使用（组件方法调用 store.方法名）

// store/index.js

import { defineStore } from "pinia";

export const useStore = defineStore("main", {
  state: () => {
    return {
      num: 0,
      name: "Eduardo",
      arr: [1, 2],
    };
  },
  getters: {
    changeNum(state) {
      console.log("getters");
      // return this.num + 1000;
      return state.num + 1000;
    },
  },
  actions: {
    upNum(val) {
      this.num += val;
    },
  },
});
// 组件内 --- 新增按钮和事件

<template>
  <div class="hello">
    {{ changeNum }}
    {{ changeNum }}
    {{ changeNum }}
    {{ changeNum }}
    <h1>组件A</h1>
    {{ name }}
    {{ num }}
    {{ arr }}
    <button @click="changeName">修改名称</button>
    <button @click="btn">+操作</button>
  </div>
</template>

<script setup>
import { useStore } from "../store";
import { storeToRefs } from "pinia";
const store = useStore();
console.log(store);
let { name, num, arr, changeNum } = storeToRefs(store); 
const changeName = () => {
  // name.value = "里斯";

  // 批量更新
  store.$patch((state) => {
    state.num++;
    state.name = "rous";
    state.arr.push(4);
  });
};

const btn = () => {
  store.upNum(200);
};
</script>

<style scoped></style>

 

 4.Pinia模块相互调用

// 新建 shopStore模块 src/shop.js

import { defineStore } from "pinia";

export const shopStore = defineStore("shop", {
  state: () => {
    return {
      list: ["棉服", "裤子"],
    };
  },
  getters: {},
  actions: {},
});

// -------------------------------------------

// src/index.js

import { defineStore } from "pinia";

import { shopStore } from "./shop"; // 1.引入shopStore模块

export const useStore = defineStore("main", {
  state: () => {
    return {
      num: 0,
      name: "Eduardo",
      arr: [1, 2],
    };
  },
  getters: {
    changeNum(state) {
      console.log("getters");
      // return this.num + 1000;
      return state.num + 1000;
    },
    // 2.getters使用
    getShopStoreList() {
      return shopStore().list;
    },
  },
  actions: {
    upNum(val) {
      this.num += val;
    },
  },
});

// 组件中使用

<template>
  <div class="about">
    useStore: {{ name }} {{ num }} {{ arr }} {{ changeNum }}
    <hr />
    shopStore中的数据引入到useStore模块中进行拿取list数据:
    {{ getShopStoreList }}
  </div>
</template>
<script setup>
import { useStore } from "../store";
import { storeToRefs } from "pinia";

const use = useStore();
let { name, num, arr, changeNum, getShopStoreList } = storeToRefs(use);
</script>

​​​​​​​

5.Pinia持久化

  1. 安装插件 
    npm install pinia-persistedstate-plugin
  2. 新建文件--src/store/index.js 
    import { createPinia } from "pinia";
// 引入pinia的持久化插件
import piniaPluginPersist from "pinia-plugin-persist";

const store = createPinia();
store.use(piniaPluginPersist);

export default store;
  3. 在main.js中注册 
    import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store/index";

createApp(App).use(store).use(router).mount("#app");
  4. 新建文件--src/store/shop.js 
    import { defineStore } from "pinia";

export const shopStore = defineStore("shop", {
  state: () => {
    return {
      list: ["棉服", "裤子"],
      price: [123, 234],
    };
  },
  getters: {},
  actions: {},
  // 使用插件开启数据缓存
  persist: {
    enabled: true,
    strategies: [
      {
        // key的名称
        key: "my_shop",
        // 更改默认存储，改为localStorage
        storage: localStorage,
        // 默认是全部进去存储
        // 可以选择哪些进入local存储，这样就不用全部都进去存储了
        paths: ["list"],
      },
    ],
  },
});

  5. 组件内使用

    <template>
  <div class="about">
    {{ list }}
    {{ price }}
    <hr />
    持久化:
    <button @click="changeshop">改变</button>
  </div>
</template>
<script setup>
import { shopStore } from "../store/shop";
import { storeToRefs } from "pinia";

const shop = shopStore();
let { list, price } = storeToRefs(shop);
const changeshop = () => {
  shop.$patch((state) => {
    state.list.push("秋裤");
    state.price.push(123);
  });
};
</script>

  6. 效果

     

     

爱吃梦龙圣代
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+pinia 面向app项目
04-13
vue3+pinia+vant+axios+vue-router 面向app项目，创建单独的登录页面信息以及相关request接口请求。这是一个简单的demo
Pinia（基本用法）
weixin_66909686的博客
01-26 1196
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态
vue3 vite 项目中 使用pinia 动态更新持久化存储persist
weixin_51127384的博客
01-30 585
1、我的目的，我需要在pinia 中调用了actions 的方法后动态的去更新userState持久化存储。2、调用pinia中的$patch方法。
Vue3：用Pinia的storeToRefs结构赋值store数据
最新发布
Brave_heart4pzj的博客
04-02 579
Vue
Pinia简介及使用
weixin_44347684的博客
04-19 5041
既然getter函数做了一些计算或者处理，那么我们很可能会需要传递参数给getter函数，但是我们前面说getter函数就相当于store的计算属性，和vue的计算属性差不多，那么我们都知道Vue中计算属性是不能直接传递参数的，所以我们这里的getter函数如果要接受参数的话，也是需要做处理的。简单来说，pinia是vueX的新版本，我们都知道Vuex在Vue2中主要充当状态管理的角色，所谓状态管理，就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。
【一文搞定Pinia】超详细的Pinia教程，比Vuex香太多了！
有事儿私信。
12-10 1万+
伴随vue2到vue3的升级，官方已经用Pinia代替了Vuex成为官方的状态管理库，推荐使用Pinia作为以后不论是vue2还是vue3状态管理库的首选！
Pinia基本使用
月光晒了很凉快的博客
11-25 1411
它是2019 年 11 月对于新版本的vue提供的组合Api进行的尝试，它可以很好的集合vue新的api方法，且还很好的支持ts的写法，Pinia已经被纳入官方代码仓库中，也可以理解为Pinia为最新版本的vuex5。Pinia中文文档：https://pinia.web3doc.top/core-concepts/plugins.html。
Pinia基础知识
上庸者-不服周
09-30 2万+
Pinia 是 Vue 的存储库，它允许跨组件/页面共享状态
pinia简介
热门推荐
weCat_s的博客
12-24 2万+
pinia
Pinia 介绍、使用、实践
Lyrelion的博客
02-28 3653
Pinia 介绍、使用、实践
在VUE3中使用Pinia
lemon_sugar的博客
08-17 1563
在VUE3中使用pinia
pinia详细使用步骤（0基础）
qq_44423029的博客
08-23 1万+
pinia使用步骤整理，从0开始很详细
大壮考了小帅 5 道 Pinia 必问面试题
07-06
解锁Pinia框架的实力：5道必问面试题及资源下载
pinia学习笔记pinia学习笔记
03-15
pinia学习笔记pinia学习笔记
uniapp + vue3 + TypeScript + pinia + uviewplus
11-03
uniapp + vue3 + TypeScript + pinia + uviewplus
Pinia快速入门.pdf
09-06
本资源可以搭配博客Pinia快速入门适用更加，该文档为博客Pinia快速入门的pdf版，可以方便大家随时随地无网络观看，也可以助力大家可以更快速的掌握这个新的技术
Pinia的简单使用
weixin_56371227的博客
08-16 2291
1.pinia 和 vuex 具有相同的功效， 是 Vue 的存储库，它允许您跨组件/页面共享状态。2.设计使用的是 Composition api，更符合vue3的设计思维。3.Pinia 对 Vue 2 和 Vue 3 都有效，并且不需要您使用组合 API。
Pinia 上手指南 -- 新一代状态管理工具，它会成为 Vuex 的良好替代品吗？
高大志leo的博客
01-24 4774
一、简介 Pinia 是 Vue 的存储库，它允许你跨组件/页面共享状态。如果你熟悉 Composition API，你可能已经使用过简单的export const state = reactive({})，这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，则会将你的应用程序暴露给安全漏洞。 即使在小型单页应用程序中，你也可以从使用 Pinia 中获得很多好处： 开发工具支持 跟踪动作、突变的时间表 store只出现在使用它们的组件中 时间旅行和更容易的调试 热模块更...
快速学习如何使用pinia
weixin_56597479的博客
09-08 2609
Pinia是基于vuex创建的状态管理工具，真对vue3而开发，同时适用于vue3与vue2，支持js与ts编写，功能更优于vuex。Pinia可通过插件对状态进行持久化存储，不会因为页面刷新而导致状态初始化。
vue3中 pinia用法
07-13
这是一个简单的使用Pinia的示例，你可以根据自己的需求定义和使用不同的Store，并在组件中引用和操作相应的状态和方法。Pinia还提供了更多高级功能，例如模块化、插件等，你可以查阅Pinia的文档以获取更详细的信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值