一、创建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
在这里面我们主要做这三件事
- 定义全局数据state
- 修改容器(仓库)中的 state
- 仓库中的 action 的使用
我们设置一个全局变量title,用它去替换欢迎界面的标题
import { defineStore } from 'pinia'
// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
// 用来存储全局数据
state: () => ({
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: () => ({
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: () => ({
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: () => ({
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
}
}