学习Pinia

news2024/11/28 0:48:19

Pinia

1.介绍Pinia
2.起步安装
3.看完文章学会pinia

1.介绍Pinia

Pinia.js 有如下特点：

完整的 ts 的支持；
足够轻量，压缩后的体积只有1kb左右;
去除 mutations，只有 state，getters，actions；
actions 支持同步和异步；
代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的
无需手动添加 store，store 一旦创建便会自动添加；
支持Vue3 和 Vue2
pinia的链接: pinia

2.起步安装

yarn add pinia
 
npm install pinia

引入注册Vue3

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
 
const store = createPinia()
let app = createApp(App)
 
 
app.use(store)
 
app.mount('#app')

Vue2 使用

import { createPinia, PiniaVuePlugin } from 'pinia'
 
Vue.use(PiniaVuePlugin)
const pinia = createPinia()
 
new Vue({
  el: '#app',
  // other options...
  // ...
  // note the same `pinia` instance can be used across multiple Vue apps on
  // the same page
  pinia,
})

3.看完文章学会pinia

1.创建项目
可根据我的另一篇文章搭建一个vue3+ts+vite的项目
链接: 创建项目
2.创建文件
在搭建的项目src下新建一个文件夹Store
然后在Store里创建一个新建文件index.ts
3.开始代码 index.ts

在这里插入图片描述

无需要创建自定义的复杂包装器来支持 TypeScript，一切都可标注类型，API 的设计方式是尽可能地利用 TS 类型推理。
无过多的魔法字符串注入，只需要导入函数并调用它们，然后享受自动补全的乐趣就好。
无需要动态添加 Store，它们默认都是动态的，甚至你可能都不会注意到这点。注意，你仍然可以在任何时候手动使用一个 Store 来注册它，但因为它是自动的，所以你不需要担心它。

写代码前根据pinia文档相关的介绍可以得到下面的代码

import { defineStore } from 'pinia'
import { ref } from 'vue'
// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 'alerts'是你的应用中 Store 的唯一 ID。必填
export const  useContentStore = defineStore('alerts', ()=>{
    const numliet = ref<number>(0)
    const addClick = ()=> {
        numliet.value += 1
    }
    // 最后不要忘记导出
    return {
        numliet, addClick
    }
})

在要使用pinia的相应的组件调用

<script setup lang="ts">
// 引入pinia
import { useContentStore } from '../../Store/index'
const store = useContentStore()
console.log(store.numliet, 'numliet,执行函数前')
store.addClick()
// 打印一下 numliet
console.log(store.numliet, 'numliet， 执行函数后')
</script>