vue3 状态管理器 pinia 用法笔记1

相关链接：

https://pinia.vuejs.org/zh/

简介

pinia是vue的状态管理库，有时候，不同页面、组件间的数据需要进行共享，pinia可用于跨组件或页面的共享状态。

可以把pinia当做一个全局组件，任何其他组件都可以往pinia中读取和写入。

安装

npm install pinia

简单例子

试想这样一种情况，在项目中，需要在多个地方获取当前登录用户信息，在项目的某个地方，需要往仓库中写入当前用户信息，并在需要获取用户信息的地方对仓库进行调用，有时候也可能修改仓库中的信息。

如何通过pinia实现这个逻辑呢？先让我们学习一下pinia的基础用法：

基础用法

pinia使用defineStore方法定义仓库，首先引入defineStore方法：

import { defineStore } from 'pinia'

调用defineStore方法返回创建的仓库调用对象，调用语法：

defineStore(仓库名, {
  对象形式的仓库配置，或者setup风格的属性及方法定义
})

对象形式的仓库配置

pinia store具有三个属性：state、actions、getters，各相当于组件中的data、methods、computed。

定义仓库配置：

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Eduardo' }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

使用定义的配置创建仓库实例：

<script setup>
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
</script>

完成实例创建后，仓库配置对象中配置的方法和数据即存在于调用useCounterStore方法返回的store实例上，通过store即可对仓库内容进行读写和调用：

store.count++

setup风格的属性及方法定义

使用setup风格的配置函数：

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Eduardo')
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, name, doubleCount, increment }
})

setup风格配置函数的调用和配置对象一样，都是通过import引入定义的useCounterStore方法，调用后返回仓库实例对象store。

简单例子

目录结构

要使用pinia，记得在main.ts里注册：

src/main.js：

import './assets/main.css'

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

const app = createApp(App)

app.use(createPinia())

app.mount('#app')

src/stores/user.js

import { defineStore } from 'pinia'

export const useUserInfoStore = defineStore('user',{
  state: ()=> ({
    name:'admin',
    id:'1111',
    password:'',
  }),
  getters: {
    getUserName: (state) => {
      return state.name
    }
  },
  actions: {
    setUserPassword(value: string){
      this.password = value
    }
  }
})

src/App.vue

<script setup lang="tsx">
import { useUserInfoStore } from '@/stores/user'

const userStore = useUserInfoStore()

console.log(userStore.name)

console.log(userStore.getUserName)

userStore.setUserPassword('123')
console.log(userStore.password)

</script>

<template>
  <div>
    hello world
  </div>
</template>

运行效果：