vue3如何使用pinia

一、pinia是什么：

让我们来看看下面的这张图

下面是官方的解释

那有的伙伴就会问了，我们不是有了vuex吗，为什么还要使用pinia呢？

二、pinia的使用

   1、基本使用

        1.安装

yarn add pinia
## 或者使用npm
npm install pinia

       在main.js中，引入pinia并使用

import {createPinia} from 'pinia

app.use(createPinia())

      2.创建store

       store实例相当于一个容器，里面包含着data,计算属性，方法之类，通过definStore来进行定           义 

      在src下面创建一个store文件夹，再创建与之对应的js文件，比如login.js

import {defineStore} from 'pinia'

## useStore 可以是useLogin,useUser等等
## 第一个参数是应用程序中store的唯一Id

export const useLogin = defineStore('Login',{
  state:()=>{

   }
})

       3.使用store

        在模板中引入 并调用

<script setup>
 import {useLogin} from '@/store/login.js

  const store = useLogin()
</script>

       4.添加state

import { defineStore } from 'pinia'
​
// 第一个参数是应用程序中 store 的唯一 id
// 第二个参数是配置对象
export const useUser = defineStore('user', {
  // state是一个函数，返回一个对象
  state: () => {
    return {
      userName: 'jack',
    }
  }
})

   2、state

    1.读取state

import { storeToRefs } from 'pinia'
const userStore = useLogin()
// 如果直接解构出数据，这个数据不是响应式的。如果想要变成响应式的，需要调用storeToRefs方法
const { userName} = storeToRefs(userStore )

     2.修改state

userStore.userName = '张三'

      3.批量修改state

// 可以用来修改单个属性
userStore.$patch({
  userName: '张三'
})
    
// 这种回调函数的形式适合修改集合类的数据，比如数组
userStore.$patch((state) => {
  state.userName = 'admin'
})

        4.重置state

userStore.$reset()

   3、getters

   1.基础使用

    类似于计算属性，推荐里面穿第一个形参的写法，不容易出错

## 注意 这里面的list需要在state中定义
getters: {
    isAdult: (state) => {
      return state.list>= 'view' ? '退出登录' : 'view'
    }
  }

   获取

## 直接在模板中使用
<template #dropdown>
   <el-dropdown-menu>
    <!-- {{ useStore.loginOut }}直接使用getters -->
    <el-dropdown-item>{{ useStore.list}}</el-dropdown-item>
       </el-dropdown-menu>
      </template>

 2、调用其他模块的getters

  getters: {
    list: (state) => {
      return state.list= 'xxx' ? 'xxx' : 'xxx'
    },
    msg: (state) => {
      // msg这个getter访问了自身的getter（isAdult）
      return state.userName + state.isAdult
    }
  }

    3.getters传参

  getters: {
    isAdmin: (state) => {
      // 如果getter里面是返回的函数，那么它就可以传参数了
      return (name) => name === 'admin' ? '是管理员' : '不是管理员'
    }
  }

 如果有其他模块的gettes可以直接写里面，然后调用方法同获取

   4、actions

  actions: {
    // 这里的方法要写成普通函数，因为里面需要通过this去访问state里面的数据
    changeNameAsync (newName) {
      setTimeout(() => {
        // actions里面可以访问state
        this.userName = newName
      }, 1000)
    }
  }

   5、模块化

   在实际开发中，不可能多个模块的数据都定义到一个store里面，而是一个模块对应一个store，最后通过一个根store进行整合

 1.随便建立两个store，并导出

// 模块一
import { defineStore } from 'pinia'
 
const useUserStore = defineStore('user', {
  state: () => {
    return {
      name: 'admin',
      age: 18,
    }
  },
})
 
export default useUserStore
 
// 模块二
import { defineStore } from 'pinia'
 
const useCounterStore = defineStore('user', {
  state: () => {
    return {
      count: 1
    }
  },
})
 
export default useUserStore

      2.新建store/index.js

import useUserStore from './user'
import useCounterStore from './counter'
 
// 统一导出useStore方法
export default function useStore() {
  return {
    user: useUserStore(),
    counter: useCounterStore(),
  }
}

         3.组件中使用

<script setup>
import { storeToRefs } from 'pinia'
import useStore from './store'
const { counter } = useStore()
 
// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count } = storeToRefs(counter)
</script>

欢迎小伙伴来进行批评和指正，如果喜欢的话给博主一个小红心吧😘