pinia基础知识

一、定义

Pinia.js 是新一代的状态管理器，由 Vue.js团队中成员所开发的，因此也被认为是下一代的 Vuex，即 Vuex5.x，在 Vue3.0 的项目中使用也是备受推崇。
Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性、存储模块组织、状态变化分组、多存储创建等)。

Pinia.js 有如下特点：

• 完整的 typescript 的支持；
• 足够轻量，压缩后的体积只有1.6kb;
• 去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）；
• actions 支持同步和异步；
• 没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割；
• 无需手动添加 store，store 一旦创建便会自动添加；

二、Pinia 核心特性

• Pinia 没有 Mutations
• Actions 支持同步和异步
• 没有模块的嵌套结构
  • Pinia 通过设计提供扁平结构，就是说每个 store 都是互相独立的，谁也不属于谁，也就是扁平化了，更好的代码分割且没有命名空间。当然你也可以通过在一个模块中导入另一个模块来隐式嵌套 store，甚至可以拥有 store 的循环依赖关系
• 更好的 TypeScript 支持
  • 不需要再创建自定义的复杂包装器来支持 TypeScript 所有内容都类型化，并且 API 的设计方式也尽可能的使用 TS 类型推断
• 不需要注入、导入函数、调用它们，享受自动补全，让我们开发更加方便
• 无需手动添加 store，它的模块默认情况下创建就自动注册的
• Vue2 和 Vue3 都支持
  • 除了初始化安装和SSR配置之外，两者使用上的API都是相同的
• 支持 Vue DevTools
  • 跟踪 actions, mutations 的时间线
  • 在使用了模块的组件中就可以观察到模块本身
  • 支持 time-travel 更容易调试
  • 在 Vue2 中 Pinia 会使用 Vuex 的所有接口，所以它俩不能一起使用
  • 但是针对 Vue3 的调试工具支持还不够完美，比如还没有 time-travel 功能
• 模块热更新
  • 无需重新加载页面就可以修改模块
  • 热更新的时候会保持任何现有状态
• 支持使用插件扩展 Pinia 功能
• 支持服务端渲染

三、使用

1. 安装

npm install pinia --save

2. 引用

• 新建 src/store 目录并在其下面创建 index.ts，导出 store

/**
 * pinia 创建
 */
import {
    createPinia } from 'pinia'
const store = createPinia()
export default store

• 在 main.ts 中引入并全局使用

import {
    createApp } from 'vue'
import App from './App.vue'
//引入pinia
import store from './store'
const app = createApp(App)
app.use(store)

四、state、getters、actions

use开头命名

1. 在 src/store 下面创建一个useUsers.ts

import {
    defineStore } from 'pinia'

export const useUsersStore = defineStore({
   
    id: 'user', // id必填，且需要唯一
  //数据仓库State 箭头函数 返回一个对象 在对象里面定义值
    state: () => {
   
        return {
   
            name: '张三',
            arr: ["名侦探柯南", "海贼王", "死神", "火影忍者"],
            num: 5
        }
    },
    //类似于computed 封装计算属性，它有缓存的功能
    getters: {
   
        getNum: (state) => state.num = state.num * 5
    },
    //methods 支持同步和异步 就是用来封装业务逻辑，修改 state
    actions: {
   
        getStore() {
   
            console.log