pinia初体验

1.Pinia简介

Pinia 是一个状态管理工具，和 Vuex 一样为 Vue 项目提供共享状态管理工具。并且支持vue2和vue3，主要是为vue3提供状态管理，支持typescript。Pinia可以创建多个全局仓库，不用像 Vuex 一个仓库嵌套模块，结构复杂。管理数据简单，提供数据和修改数据的逻辑即可，不像Vuex需要记忆太多的API。

2.Pinia使用

1.安装

# or
yarn add pinia
# or
npm i pinia

2.导入使用,当做vue的插件使用

为了在项目中规范化使用,在src下创建目录stores,并创建index.ts文件

const pinia = createPinia()

export default pinia

在main.ts中注册pinia

import { createApp } from 'vue'
import pinia from './stores/index'

const app = createApp(App)
app.use(pinia).mount('#app')

在stores下创建nodules文件夹,可以分模块使用

import { ref } from 'vue'

type User = {
  id: string
  name: string
  age: number
  gender: string
}

export const useUserStore = defineStore('user', () => {
  // 相当于 vuex 中的 state
  const userInfo = ref<User>({
    id: 'abc',
    name: '张三',
    age: 15,
    gender: '男',
  })

  return { userInfo }
})

在index.ts文件中导入,这样就可以在vue文件中使用了

3.使用

在vue文件中引用并使用

const store = useUserStore()

<span>{{ store.userInfo.age }}</span>
<span>{{ store.userInfo.gender }}</span>