Pinia的基本使用

前言

最近发现vue中出了个Pinia，与vuex一样用来管理状态的, 提前简单学习一下。

Pinia官网： Pinia
基本格式：

import { defineStore } from 'pinia'
export const useUserStore = defineStore({
  id: 'user',   // id必填，保证在Store中唯一
  state: () =>({}),
  getters: {},
  actions: {}
})

以下内容都是基于vue3的

基本使用

1、安装

npm install pinia@next

2、main.js中引用pinia

在main.js文件中创建一个 pinia（根存储）并将其传递给应用程序

import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia'

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);

app.mount('#app');

3、在src下面新建store文件夹，在建一个index.ts文件 src/store/index.ts

import { defineStore } from "pinia" // 定义容器

// id：必须的，保证在Store中唯一, 两种写法
// export const piniaStore1 = defineStore('userId', {});
// export const piniaStore2 = defineStore({id: 'userId',});

export const piniaStore = defineStore('userId', {
  // 1.必须是箭头函数: 为了在服务器端渲染的时候避免交叉请求导致数据状态污染
  // 2.TS 类型推导, 结合了TS
  state: () => {
    return {
      count: 0,
      count2: 2
    }
  },
  // 用来封装计算属性 有缓存功能  类似于computed
  getters: {
    getNum(state) {
      return state.count;
    },
    getNum2(state) {
      return state.count2;
    }
  },
  //  编辑业务逻辑  类似于methods
  actions: {
    updateCount() {
      this.count ++;
    },
    updateCount2(data: number) {
      this.count2 = data;
    }
  }
})

4、页面上的基本使用