pinia在vue3+ts的项目中的简单安装使用

pengxiangfei666

已于 2024-04-24 15:38:19 修改

阅读量2.2k

点赞数 46

文章标签： javascript vue.js 前端开发语言

于 2024-04-24 15:34:28 首次发布

本文链接：https://blog.youkuaiyun.com/pengxiangfei666/article/details/138159389

版权

1. 简介背景

在这里插入图片描述

1.什么是TypeScript？

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和使用看起来像基于类的面向对象编程语法操作Prototype。

2.TypeScript的历史

2012年10月，微软发布了首个公开版本的TypeScript，
2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。当前最新版本为TypeScript3.8。

3.JavaScript 与 TypeScript 的区别

1.TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 2.TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
3.TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

TypeScript的优点
TypeScript 增加了代码的可读性和可维护性
1.类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了
2.可以在编译阶段就发现大部分错误，这总比在运行时候出错好
3.增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等

TypeScript 非常包容
1.TypeScript 是 JavaScript 的超集，.js 文件可以直接重命名为 .ts 即可
2.即使不显式的定义类型，也能够自动做出[类型推论
3.可以定义从简单到复杂的几乎一切类型
4.即使 TypeScript 编译报错，也可以生成 JavaScript 文件
5.兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取

TypeScript 拥有活跃的社区
1.大部分第三方库都有提供给 TypeScript 的类型定义文件
2.Google 开发的 Angular2 就是使用 TypeScript 编写的
3.TypeScript 拥抱了 ES6 规范，也支持部分 ESNext 草案的规范

2. 安装引入

1.第一步下载安装

npm install -g typescript 或者 yarn add global typescript

2.确认是否安装成功: tsc -v

3.在main.js文件引入绑定

import { createPinia } from 'pinia'
app.use(createPinia())

3.简单使用

1.新建一个 pinia文件夹在文件夹下新建index.ts 的文件
在这里插入图片描述
2.index.ts文件代码

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
    state: () => ({
      count: 10,
    }),
    getters: {
      // 自动将返回类型推断为数字
      doubleCount(state) {
        return state.count * 2
      },
      // 返回类型 **必须** 明确设置
      doublePlusOne(): number {
        // 整个商店的自动完成和填写 ✨
        return this.doubleCount + 1
      },
    },
    actions: {
        increment(val:number) {
          this.count += val
        }
      }
  })

state就是一个存储数据的状态库
getters就相当于是基于state的值可以增加一些其他的处理
actions是可以改变state的值的一些方法，逻辑处理，可以是同步的也可以是异步的

3.在文件中使用
（1.）直接使用state的值和getter方法

<template>
  <div>
    getter:{{ store.doubleCount }}
    ref: {{ count }}
  </div>
</template>
const store = useCounterStore();
import { storeToRefs } from "pinia";
let { count } = storeToRefs(store);

运行结果
在这里插入图片描述

（2.）通过方法改变state的值

<template>
  <div>
    <a-button type="primary" @click="submit">改变</a-button>
    getter:{{ store.doubleCount }}
    ref: {{ count }}
  </div>
</template>
const store = useCounterStore();
import { storeToRefs } from "pinia";
let { count } = storeToRefs(store);


const submit = () => {
  // 1. 批量更新
   store.$patch((state) => {
    state.count = 100;
    // 可以写多个
  });

 // 2. 单个修改
 //  count.value = 50

 // 3. 通过actions方法修改
 //  store.increment(100)
};

三种方法已经注释，需要的自己去解开测试

ps：他还支持一些类似vuex的方法，我就不一个一个测试了，看完觉得不错赶紧给我点赞吧

mapActions(useStore, keyMapper): _MapActionsObjectReturn。通过生成要在组件的 methods 字段中铺开的对象，允许直接使用存储（store）中的操作（action），而不使用合成API (setup())。对象的值是操作（action），而键是结果方法的名称。
mapState(useStore, keyMapper): _MapStateObjectReturn。通过生成要在组件的 computed 字段中展开的对象，以允许从一个没有使用组合式 API (setup()) 的 store 使用 state 和 getters 对象的值是状态 properties/getters ，而键是结果计算属性的名称。您也可以传递一个自定义函数，该函数将接收 store 作为其第一个参数。请注意，虽然它可以通过这个访问组件实例，但它不会识别类型。
mapStores(…stores): _Spread。通过生成要在组件的 computed 字段中展开的对象，允许使用没有组合式API (setup())的存储。它接受 store 定义的列表。