目录
一.为什么要使用 Pinia?
二.安装
1.用你最喜欢的包管理器安装 pinia:
2.引用
三.定义一个 Store
四.添加数据到store
五.在页面上渲染
六.pinia的数据处理
6.将数据改变为响应式
6.1重置数据
6.2批量修改数据
6.3批量修改数据
6.4直接替换整个state
一.为什么要使用 Pinia?
Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态。 如果您熟悉 Composition API,您可能会认为您已经可以通过一个简单的 export const state = reactive({})
. 这对于单页应用程序来说是正确的,但如果它是服务器端呈现的,会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中,您也可以从使用 Pinia 中获得很多好处:
- dev-tools 支持
- 跟踪动作、突变的时间线
- Store 出现在使用它们的组件中
- time travel 和 更容易的调试
- 热模块更换
- 在不重新加载页面的情况下修改您的 Store
- 在开发时保持任何现有状态
- 插件:使用插件扩展 Pinia 功能
- 为 JS 用户提供适当的 TypeScript 支持或 autocompletion
- 服务器端渲染支持
二.安装
1.用你最喜欢的包管理器安装 pinia
:
yarn add pinia
//# 或者使用 npm
npm install pinia
提示
如果您的应用使用 Vue 2,您还需要安装组合 API:@vue/composition-api
。 如果您使用 Nuxt,则应遵循 这些说明。
2.引用
创建一个 pinia(根存储)并将其传递给应用程序:
/在main.js中引入
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia).mount('#app')
三.定义一个 Store
1.在深入了解核心概念之前,我们需要知道 Store 是使用 defineStore()
定义的,并且它需要一个唯一名称,作为第一个参数传递:
在user.js中创建并暴露:
//在user.js中
import { defineStore } from 'pinia'
// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
const useStore = defineStore('main', {
// other options...
})
//默认暴露
export default useStore
在index.js中引入:
//在index.js中引入并统一暴露出去
import useStore from './modules/user'
export {
useStore
}
在页面使用时引入index.js中相应的store,并使用:
import {useStore} from '../store'
const store = useStore()
console.log(store);
四.添加数据到store
1.大多数时候,state 是 store 的核心部分。 我们通常从定义应用程序的状态开始。 在 Pinia 中,状态被定义为返回初始状态的函数。 Pinia 在服务器端和客户端都可以工作。
const useStore = defineStore('user', {
// other options...
state:()=>{
return {
name:'张三',
age:123,
school:{
teacher:'罗翔',
hobby:'判刑'
}
}
}
})
五.在页面上渲染
上述内容有点繁琐,可以通过解构来简化:
注:修改数据时千万不能直接修改解构后的值,要修改store上的值
<template>
<div>
<h1>home</h1>
<h1>{{name}}</h1>
<h1>{{age}}</h1>
<h1>{{school}}</h1>
</div>
</template>
<script setup>
import {useStore} from '../store'
const store = useStore()
//解构简化
const {name,age,school} = store
console.log(store);
</script>
六.pinia的数据处理
6.将数据改变为响应式
//方法一
import { storeToRefs } from 'pinia'
const store = useStore()
const {name,age,school} = storeToRefs(store)
//方法二
import {toRefs} from 'vue'
const store = useStore()
const {name,age,school} = toRefs(store)
6.1重置数据
store.$reset()
6.2批量修改数据
注:按照原来数据类型进行替换,一样则换,不一样就不换
store.$patch({
name:'王五',
age:33,
school:{
teacher:'麻子'
}
})
6.3批量修改数据
//传一个箭头函数,state就是store数据
store.$patch((state)=>{
console.log(state);
state.name = "罗翔"
})
6.4直接替换整个state
//测试时也是局部替换,但是可以(完全替换)里面的数据
store.$state = {
name:'杨七'
}
七.Getters语法
Getter 完全等同于 Store 状态的 计算值。 它们可以用 defineStore()
中的 getters
属性定义。 他们接收“状态”作为第一个参数以鼓励箭头函数的使用:
注:计算属性必须有返回值
getters:{
// 自动将返回类型推断为数字 普通函数
doubleCount(state) {
console.log('state=>',state);
return state.counter * 2+5
},
// 箭头函数中的this不可以用,可以用state参数
doubleCount2:(state)=>{
return 5 + state.doubleCount
},
// this写法
doubleCount2(state){
return 5+this.doubleCount
}
}
在页面渲染
//使用store.属性名
<template>
<p>Double count is {{ store.doubleCount }}</p>
</template>
八.Actions语法
Actions 相当于组件中的 methods。 它们可以使用 defineStore()
中的 actions
属性定义,并且它们非常适合定义业务逻辑:
//actions中没有state参数,数以不要用箭头函数
actions:{
changeAge(a){
console.log(a,'a');
},
//这个函数this.changeAge()最后执行
async too(){
let num = await 999
this.age = num
this.changeAge()
}
}
注:如果想在actions使用箭头函数,但是this指向有问题,可以从页面将store当参数传递过去,
然后用state接收
调用:调用用store.方法名
store.changeAge(1)