【pinia使用】极简教程,快速上手pinia管理vue中的数据和状态

vue3 中如何使用pini进行状态管理

安装pinia

npm i pinia

使用pinia

1. 新建js模块文件，用来引入pinia
   于项目中新建一个目录叫stores或pinia都可以,示例中用的是pinia，再于这个目录中新建index.js

import { createPinia } from "pinia"; // 导入pinia中的createPinia函数
const pinia = createPinia() // 通过函数得到一个pinia实例
export default pinia  // 导出该实例

2. 在项目main.js中引入前面刚建的模块js

import { createApp } from 'vue'
import App from './App.vue'
import pinia  from './pinia'  // 导入pinia实例
 // 完整写法是import pinia from './pinia/index.js'
createApp(App).use(pinia).mount('#app')   // 挂载前使用实体

3. 在pinia目录，再新建一个具体store的模块js，比如counter.js
   可以根据不同的状态需求，建立不同的store模块js来管理。
   比如user.js,goods.js,而导出的时候。在前面加use例如useUser、useGoods

import { defineStore } from 'pinia' // 导入defineStore函数
// 该函数第一个参数是给store取个id,第二个参数是要返回的对象
// 对象中有三个核心属性：state 类似data,getters 类似computed,actions 类似methods
// 注意该函数执行后，返回的还是一个函数，符合组件式api的风格
const useCounter = defineStore('counter', {
    // state() { // 类似选项式api中的data，实际是一个函数
    //     return {
    //         count: 1
    //     }
    // }
    state: () => ( { count: 1 })  //箭头函数写法
    // state: function () {
    //     return {
    //         count: 1
    //     }
    // }
})
export default useCounter  // 注意导出的模块其实是个函数

5. vue中使用pinia的store，在修改使用pinia状态管理中

<template>
  <div class="app">
    <h2>App component</h2>
    <div>计数器：{{ counterStore.count }}</div>
  </div>
</template>

<script setup>
import  useCounter  from "./pinia/useCounter"; // 导入模块，注意它是个函数
const counterStore = useCounter()  // 执行函数，得到一个被管理的store
</script>

<style></style>

6. 当然也可以对第5步的对象进行解构,第5步中，template使用count要通过counterStore.count的形形式，能不能直接用count呢,可以，请将counterStore解构得到count变量,但是注意，如果想得到将解构的数据变成响应式的，就要用toRefs()或storeToRefs()

<template>
  <div class="app">
    <h2>App component</h2>
    <div>计数器：{{ count }}</div>
    <!-- 这里可以直接使用解构得到的count -->
    <button @click="increment">计数器+1</button>
  </div>
</template>

<script setup>
import useCounter from '@/pinia/counter.js'
// import { toRefs } from 'vue'
import {storeToRefs} from 'pinia'
const counterStore = useCounter()
// const { count } = counterStore  // 解构counterStore得到count，但是这样的count不是响应式的
// 要改成响应式的有两种办法 
// let {count} = toRefs(counterStore)//用vue提供的toRefs()
let {count} = storeToRefs(counterStore)  // 用pinia提供的storeToRefs()

function increment() {
  counterStore.count++
}
</script>

<style></style>

7. 用户状态管理演示
   pinia目录新建user.js

import { defineStore } from "pinia";
const useUser = defineStore('user',{
    state:()=>({
        username:'张三',
        password:'666888',
        age:18,
        gender:'男',
        address:'中国深圳'
    })
})
export default useUser

components目录新建User.vue

<template>
    <div class="user">
        <h2>用户信息</h2>
        <ul>
            <li>{{ username }}</li>
            <li>{{ password }}</li>
            <li>{{ age }}</li>
            <li>{{ gender }}</li>
            <li>{{ address }}</li>
        </ul>
    </div>
</template>

<script setup>
import useUser from '@/pinia/user'
import { storeToRefs } from 'pinia';
const userStore = useUser()
const { username, password, age, gender, address } = storeToRefs(userStore)
</script>

<style scoped></style>```