Pinia入门

一，什么是pinia

       简单来说pinia就是类似与vuex的状态管理工具。用于实现项目公共数据的存储读取，一般用来搭配vue3项目，同时也兼容vue2。相比于vuex，pinia简化了一些东西，更适用于中小型项目。废话不多说，正片开始......

二，pinia的基本使用及配置

        1，第一步：在项目中下载安装pinia 

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

        2，第二步：在项目中导入并使用pinia------(main.js/main.ts)

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

// 导入pinia
import { createPinia } from "pinia";
const pinia = createPinia();

// 挂载
createApp(App).use(pinia)

        3，第三步：创建基础pinia文件

       在项目的src文件夹下新建store文件夹，之后我们便可以在该文件夹下创建符合不同场景的pinia文件。

                                         

        创建pinia很简单，pinia提供了defineStore函数，我们只需导入调用即可：

//按需导入defineStore 
import { defineStore } from 'pinia'

//调用并按需导出
// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
  // 其它配置项
})

       上面我们便创建好了一个简易的pinia模板，其中defineStore函数接受两个参数

• name：一个字符串，必传项，该store的唯一id。
• options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。

        4，第四步，学习使用pinia配置项（state, getters, actions）

import {defineStore} from 'pinia';
//需要注意的是，defineStore返回的是一个回调方法
export  const userTestStore = defineStore('users',{
    //id:'test',//test是该状态管理的唯一标志也可以使用defineStore(id,{});的形式---如上
    <--state(){
     return {
         name:'hello pinia',
         count:20
     }       
    },-->

//在使用getters时，建议将state写成箭头函数的形式

    state: () => {
        return {
            count: 0,
            name:'lng'
        }
    },

    getters:{
        testGetters(){
            return this.name+'...'; //可以直接使用this来获取内部(state)内容
        } 
    },

    actions:{
        setCount(){
           this.count++
        }
    }
 

    5，第五步，在组件中访问pinia

        1，在组件中按需导入store

        2，调用函数

        3，访问pinia中变量 

<template>
  <div class="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>state变量---解构&nbsp;:{{ count }}</div>
    <br />
    <div>state变量---直接调用&nbsp;:{{ cddStore.name }}</div>
    <br />
    <div>getters---解构:{{ cddStore.countRide }}</div>
    <br />
    <div>getters---直接使用:{{ countRide }}</div>
    <br />
    <button @click="setCount">+1--action</button>
    <FirstDay />
  </div>
</template>

<script setup>
import FirstDay from './study/firstDay'
//按需导入store函数
import { useStore } from "./store";
//storeToRefs 是为了在解构store对象的时候保持数据的响应式
import { storeToRefs } from "pinia";
//调用函数
const cddStore = useStore();
//这里我们可以选择直接通过cddStore.count来访问pinia里面state里面的变量count，也可以选择像下面一样解构出来
let { count, countRide } = storeToRefs(cddStore);
</script>

<style scoped>
.app {
  text-align: center;
}
</style>

state里的变量有两种访问方式：

• 直接访问 ：{{store.count}}   ---  store为store函数调用的实例、count为pinia里面state的变量名
• 解构访问：需要用到storeToRefs，let { count, countRide } = storeToRefs(cddStore);（见上图），解构后的变量可以直接在模板中使用--- {{count}}

// state的五种方式修改值
    //1.直接修改值
        cddStore.count=2
    //2.通过$patch修改,支持单个或多个属性修改
        cddStore.$patch({name:'cdd'})
    //3.$patch工厂函数方式
        cddStore.$patch((state) => {
          state.count= 99;
          state.name = 'ljl'
        })
    //4.$state 缺点是必须修改整个对象
        cddStore.$state = { count: 88, name: 'cng' }
    //5.action
        cddStore.setCount()  //pinia中action的方法（同时支持同步和异步操作）