【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;
相关推荐
知识分享小能手28 分钟前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
MC丶科2 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
lijun_xiao20094 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔4 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼4 小时前
JavaWeb_p165部门管理
java·开发语言·前端
90后的晨仔4 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔5 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀5 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP5 小时前
Ajax 详解
java·前端·ajax·javaweb
非凡ghost5 小时前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求