Pinia最简单使用(vite+vue3)

文章目录

创建项目·

js 复制代码
npm create vite@latest my-vue-app

选vue
选JavaScript
cd my-vue-app
npm install
npm run dev

安装Pinia包

js 复制代码
npm install pinia

main.js注册Pinia

js 复制代码
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from "pinia";
const app = createApp(App)
const pinia = createPinia();
app.use(pinia).mount('#app');

在src下创建store/store.js文件,放入以下内容

js 复制代码
import { defineStore } from "pinia";
// 导出方法(每个方法对应一个模块,相当于vuex的模块化,引入组件时按需引入)
export const xj = defineStore("main", {
  state: () => {
    return {
      name: "萧寂",
      age: 22,
      sex: "男",
    };
  },
  getters: {},
  actions: {},
});

在app.vue中的使用(在其他组件也一样的)

html 复制代码
<script setup>
//解构出store.js内的需要的方法(每个方法对应一个模块,相当于vuex的模块化)
import { xj } from "./store/store";

//将数据变成响应式的方法
import { storeToRefs } from "pinia";

// 调用解构出来的方法
const store = xj();

//将store内的属性变成响应式的
storeToRefs(store);
//也可以(二者使用方式等价)
// const {name,age} = storeToRefs(store); //此时的name和age也是响应式的,但和ref不同,修改name或者age需要用store调用,如store.name=''

//修改数据
const changeName = () => {
  store.name = "张三";
};

//还原/重置所有数据
const reasetName = () => {
  store.$reset();
};
const reasetName2 = () => {
  // 这种重置相当于赋初始值操作,比较麻烦,推荐使用方式一
  store.name = "萧寂";
  store.age = 22;
  store.sex = "男";
};

//批量修改数据
const pathStore = () => {
  store.$patch({
    name: "小红",
    age: 100,
    sex: "女",
  });
};

const pathStore2 = () => {
  // 这种批量修改相当于赋值操作, 比较麻烦,推荐使用方式一
  store.name = "萧寂哈哈哈哈";
  store.age = 50;
  store.sex = "女";
};

const piniaData = () => {
  console.log(store.name);
  console.log(store.age);
  console.log(store.sex);
};
</script>

<template>
  <!-- 获取pinia的数据 -->
  <div>姓名:{{ store.name }}</div>
  <div>年龄: {{ store.age }}</div>
  <div>性别: {{ store.sex }}</div>

  <button @click="changeName">只更改姓名</button>
  <button @click="reasetName">重置所有(方法一)</button>
  <button @click="reasetName2">重置所有(方法二)</button>
  <button @click="pathStore">批量修改数据(方式一)</button>
  <button @click="pathStore2">批量修改数据(方式二)</button>
  <button @click="piniaData">在js里面打印当前数据</button>
</template>

<style scoped lang="scss"></style>

接下来直接运行就好,我个人就比较喜欢直接使用赋值,直接修改这种,并且支持重置和批量修改,这里并未讲到关于pinia的方法使用,如gettersactions配置,因为我个人目前还没用到这种场景,只用到了全局数据,这里就只讲到了最简单使用就上面的取值赋值重置批量修改在js中打印数据,我目前只用到了这些,如果需要其他更详细的,来我博客找详细的pinia笔记去看

相关推荐
java1234_小锋11 分钟前
一周学会Flask3 Python Web开发-redirect重定向
前端·python·flask·flask3
GDAL20 分钟前
UniApp SelectorQuery 讲解
vue.js
琑9529 分钟前
nextjs项目搭建——头部导航
开发语言·前端·javascript
light多学一点40 分钟前
视频的分片上传
前端
计算机学姐1 小时前
基于SpringBoot的校园消费点评管理系统
java·vue.js·spring boot·后端·mysql·spring·java-ee
Gazer_S1 小时前
【Windows系统node_modules删除失败(EPERM)问题解析与应对方案】
前端·javascript·windows
bigyoung1 小时前
基于 React 的列表实现方案,包含创建和编辑状态,使用 Modal 弹框和表单的最佳实践
前端
沙子迷了蜗牛眼1 小时前
antv G6绘制流程图
开发语言·javascript·ecmascript
乌木前端1 小时前
包管理工具lock文件的作用
前端·javascript
司玄2 小时前
3dtiles平移旋转原理及可视化工具实现
前端