5. pinia集中状态存储

在任意Vue⻚⾯之间共享的全局数据。例如登录信息，只要完成了登录，所有Vue⻚⾯都能读取到当前登录⽤户。
Vue2中提供的集中状态存储框架是Vuex，Vue3中新提供了Pinia。如果你使⽤的还是Vue2，那么注意下，Vuex 和Pinia不能⼀起使⽤。

5.1 pinia基本使用方法

步骤1：安装pinia

Pinia可以在创建应⽤时选择引⼊。如果创建时没有引⼊，那就需要⼿动引⼊⼀下。

复制代码

npm install pinia

步骤2：引用pinia

TypeScript 复制代码

...
const app = createApp(App)
app.use(router) //引用路由实例
app.use(createPinia()) //引用Pinia状态管理库实例
app.mount('#app')
...

步骤3：创建pinia的store

⼀个Store可以理解为一块数据，供全局使用。

Pinia的Store中有三个概念：state, getter , action。这三个概念也可以类⽐于熟悉的MVC。state相当于是数据；getter相当于是服务，⽤来获取并返回数据；action相当于是Controller，组织业务逻辑。

下面示例如何创建store，在stores文件夹下新建user.store，代码如下：

TypeScript 复制代码

import { defineStore } from 'pinia'

    export const userStore = defineStore('userStore',{
        
        //state定义要保存的数据结构
        state(){
            return{
            //给定默认值
                username:'--'
            }
        },

        
        //getters读取state的计算值
        getters:{
            getUsername():string{
                return this.username.toUpperCase()
            }
        },
        
        
        //action封装修改state的业务动作
        actions:{
            changeUsername(value:string){
                if(value && value.length<10){
                    this.username = value
                }
            }
        },

    })

步骤4：使用pinia的store

在任意位置可以引用pinia的全局数据store，代码如下：

TypeScript 复制代码

....


import { userStore } from "@/stores/user";
//获取store
const user = userStore()

// 获取store中的数据
// 方式1，直接获取
console.log(user.username)
// 方式2，通过getter获取state数据 推荐⽅式
console.log(user.getUsername)

//修改store中的值
//方式1，直接修改某⼀个state
user.username='roy'
//方式2，修改完整的state
user.$patch({
  username:'roy2'
})
//方式3，通过action进⾏修改 推荐⽅式
user.changeUsername('roy')
....

5.2 store数据转成双向绑定数据

如果需要将store中的数据声明成响应式数据，供Vue的模板使⽤，可以使⽤pinia提供的storeToRefs 函数。它和Vue提供的toRefs 函数的区别在于，stroeToRefs只将store中的数据转换成响应式数据。⽽toRefs会将store对象中**很多隐藏的⽅法和属性⻚**转换出来。

TypeScript 复制代码

import { storeToRefs } from "pinia";

//方式1：toRefs转换后包含了很多隐藏⽅法和属性，⽐如$patch
let userInfo2 = toRefs(user)
console.log(userInfo2)

//方式2：storeToRefs转换后只有username和getUsername
let userInfo = storeToRefs(user)
console.log(userInfo)

5.3 store混合式写法

store也有⼀种混合式的写法，将各种组件混合到⼀起。

复杂项⽬当中，不太建议这样⽤。但是如果别⼈这么⽤了，你要能看懂。

代码如下：

TypeScript 复制代码

import { defineStore } from 'pinia'
import { reactive } from 'vue'
export const userStore = defineStore('userStore',()=>{
 //相当于是state
const userInfo = reactive({username:"---"})
 //相当于action
function changeUsername(value:string){
if(value && value.length<10){
userInfo.username = value
 }
 }
 //相当于getters
function getUsername():string{
return userInfo.username.toUpperCase()
 }
 //不⽤区分什么类型，返回出去的就可以⽤
return {userInfo,changeUsername,getUsername}
})