【vue3】pinia配置(任意组件通信,集中状态管理容器)

选择式写法

一、安装pinia依赖

终端输入:npm install pinia

二、配置pinia

第一步:创建仓库,在src目录下创建文件夹modules和文件index.ts.
第二步:配置index.ts

javascript 复制代码
// 创建pinia大仓库
import { createPinia } from "pinia";
let store = createPinia();
export default store;

第三步:在main.ts引入

第四步(案例):配置小仓库info

javascript 复制代码
import { defineStore } from "pinia";
// defineStore("仓库名","仓库的基础配置")
let useInfoStore = defineStore("info", {
  // 存储数据
  state: () => {
    return {
      name: "zs",
      age: 1,
    };
  },
  actions: {
    changeAge() {
      this.age++;
    },
  },
  getters: {
    c() {
      let s: string = this.name + this.age;
      return s;
    },
  },
});
export default useInfoStore;

第五步:组件调用小参考数据

组合式写法

javascript 复制代码
import { defineStore } from "pinia";
import { ref, computed } from "vue";

let useToolStore = defineStore("tool", () => {
  let tool = ref([
    { name: "lisi", age: 12 },
    { name: "wangwu", age: 14 },
  ]);
  let arr = ref([1,2,3]);
  const c = computed(() => {
    return arr.value.reduce((pre: any, next: any) => {
      return pre + next;
    },0);
  });
  return {
    tool,
    arr,
    updateAge() {
      tool.value.push({ name: "xx", age: 66 });
    },
    c,
  };
});
export default useToolStore;
相关推荐
qiyue7713 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
断竿散人17 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD19 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟19 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
安思派Anspire20 分钟前
LangGraph + MCP + Ollama:构建强大代理 AI 的关键(一)
前端·深度学习·架构
LRH20 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
Jolyne_21 分钟前
可配置永久生效的Table组件的封装过程
前端·react.js
断竿散人21 分钟前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise
肖魏眸23 分钟前
vue3 格式化 : antfu 组合 prettier & eslint & 提交格式化校验
前端·代码规范
婉婉耶24 分钟前
VUE带你乘风破浪~
前端·vue.js