pinia教程

一、创建vue3项目及安装pinia

通过vite来创建一个Vue3项目

npm init vite

填写项目名称

选择vue

再选择vue-ts（使用typescript语法）

然后跟着提示执行命令，安装依赖，运行项目
项目启动成功：

安装pinia

cnpm install pinia

项目创建完成

二、创建store并使用数据

建议看一下官方文档pinia
1、在main.ts中引入pinia

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

createApp(App).use(createPinia()).mount('#app')

不喜欢这种链式的也可以进行如下改造

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

// 创建pinia 实例
const pinia = createPinia()
const app =createApp(App)
// 挂载到 Vue 根实例上
app.use(pinia)
app.mount('#app')

2、创建全局仓库store
在src下新建store -> index.ts
在这里面我们主要做这三件事

1. 定义全局数据state
2. 修改容器(仓库)中的 state
3. 仓库中的 action 的使用

我们设置一个全局变量title，用它去替换欢迎界面的标题

import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
    // 用来存储全局数据
    state: () => {
        return {
            title: 'hello，welcome to pinia'
        }
    },
    //   用来监视或者说是计算状态的变化的，有缓存的功能。
    getters: {},
    //   对state里数据变化的业务逻辑，就是修改state全局状态数据的。
    actions: {}
})

在HelloWorld.vue文件中引入我们导出的useStore

import { useStore } from '../store/index'

声明

const store = useStore()

使用

  <h1>{{ store.title }}</h1>

成功替换

三、在组件中直接修改全局数据

在仓库中新增一个变量count等于零，并将其展示到HelloWorld.vue页面

	state: () => {
        return {
            title: 'hello，welcome to pinia',
            count: 0
        }
    },

<h1>{{ store.title }}--{{store.count}}</h1>

然后在app.vue页面写一个button按钮直接改变仓库中的count值

<script setup lang="ts">
	import HelloWorld from './components/HelloWorld.vue'
	import {
	    useStore
	} from './store/index'
	const store = useStore()
	// 直接修改
	const handleClick = () => {
	    store.count++
	}
</script>

<template>
	<img alt="Vue logo" src="./assets/logo.png" />
	<HelloWorld />
	<div><button @click="handleClick">count++</button></div>
</template>

可以直接对数据仓库里面的数据进行修改，不用像vuex那么麻烦了。

四、修改仓库中数据的三种方式

第一种、跟第三节一样，直接赋值修改，适用于少量数据修改

第二种、$patch，适用于修改多条数据，并且会加快修改速度

  store.$patch({
    count: store.count + 2
  });

除了可以传入对象外还可以传入一个方法，方法的参数就是数据仓库的对应的state

	store.$patch((state)=>{
      state.count++
    })

第三种、action，适用于业务逻辑相同的时候，在数据仓库的action中定义好方法，再通过组件直接修改
先定义好方法

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

在组件中直接调用

	store.changeCount()

五、getters的使用

可以理解成vue的计算属性，具有缓存属性
在仓库中新增一个phone全局变量，然后通过getters写一个phoneHidden函数将手机号的中间四位隐藏

 	state: () => {
        return {
            title: 'hello，welcome to pinia',
            count: 0,
            phone: '13588886789'
        }
    },
    //   用来监视或者说是计算状态的变化的，有缓存的功能。
    getters: {
        phoneHidden(state){
            return state.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
        }
    },

在页面中直接调用，调用之前别忘了先引入数据仓库和声明store

<h1>{{store.phoneHidden}}</h1>

六、互相调用数据仓库中的值

在store文件下新建一个login.ts代码如下：

import { defineStore } from 'pinia'

export const loginStore = defineStore('login', {
    state: () => {
        return {
            userInfo: [
                { nickName: '昵称' },
                { avatar: '头像' }
            ]
        }
    }
})

到store->index.ts中引入，当我们改变count的时候将userInfo打印出来

	import { loginStore } from "./login";

	actions: {
        changeCount(){
            this.count++
            console.log(loginStore().userInfo)
            // this.count+=this.change()
        },
        change(){
            return 90
        }
    }