前言

Pinia.js 是新一代的状态管理器，由Vue.js 团队的成员开发，因此它也被认为是Vuex 的下一代，即，Vuex5.x，也强烈推荐在Vue3.0的项目中使用。

Pinia.js 具有以下功能：

• 完整的打字稿支持；
• 足够轻，压缩后大小仅1.6kb；
• 删除突变，仅状态、吸气剂、操作（这是我最喜欢的功能之一）；
• actions支持同步和异步；
• 没有模块嵌套，只有store的概念，store之间可以自由使用，并且更好的代码分割；
• 无需手动添加店铺，店铺创建后会自动添加；

安装

npm install pinia --save

创建商店

新建src/store目录，并在其下创建index.ts，导出store

// src/store/index.ts

import { createPinia } from 'pinia'

cons t  store = createPinia()

导出默认商店
复制代码

在main.ts中引入并使用。

// src/main.ts

import { createApp } from 'vue'
im port 应用程序 来自 './App.vue'
导入 store 来自 './store'

const  app = createApp(App)
app.使用（储存）

州

定义状态

在src/store下创建user.ts

//src/store/user.ts

import { DefineStore } from 'pinia'

export const useUserStore = DefineStore({
 id: '用户',
 状态: () = > {

获取状态
<模板>
 <div>{{ www.sychzs.cn }}div  >
模板>

<脚本 lang="ts" 设置>  导入 { useUserStore } 来自 ' @/ store/user'

const userStore = useUserStore()
script>

也可以结合计算得到。 
常量名称=计算（（）=> www.sychzs.cn）
状态也可以使用解构，但是使用解构会使其失去响应能力。这种情况下，可以使用pinia的storeToRefs。 
导入 { storeToRefs } 来自 'pinia'
const {名称} = storeToRefs(userStore)

修改状态
可以直接修改状态如下
www.sychzs.cn = '李思'

但一般不建议这样做。建议通过action来修改state。可以通过此直接访问操作。 
导出 const useUserStore = DefineStore({
 id : '用户',
状态 : () => {
 返回 {
 姓名：'张三'
 }
 },
 actions() {
   updateName(name) {
   这个.name = 名称  }
}
})

 <脚本 lang="ts" 设置>
导入 { useUserStore } 来自   '@/store/user'

const userStore = useUserStore()
userStore.updateName('李思')
</script>

吸气者
？  }
 ) 
userStore.fullName //张三丰

行动

异步动作

action 可以像编写简单的函数一样支持 async/await 语法，让您愉快地应对异步处理场景。

导出 const useUserStore = DefineStore({
 id : '用户',
 actions() {
异步登录（帐户，密码）{
const{数据}=等待 api.login(账号、密码)
 返回  数据
 }
 }
})

动作互相呼唤

动作之间的相互调用。

 导出 const useUserStore = DefineStore({
  id : '用户',
 actions() { 
 async 登录（帐户，密码）{
 const { 数据 } =  等待 api.login(账户, 密码)
 this.setData(data) //调用另一个动作方法 
 return data   },
 setData(数据) {
 控制台.log(数据)
 }
 }
})

在一个action中调用其他store中的action是比较简单的。引入对应的store后，就可以使用它的action方法了。

// src/store/user.ts

import { useAppStore } 来自 './app'
导出 常量 useUserStore = defineStore({
  id: '用户',
  actions() {
    异步 登录（帐户，密码） {
      const { 数据 } = await api.login（帐户，密码）
      const appStore = useAppStore()
      appStore。 setData(data) //调用app store里的action方法
      returndata
    }
  }
})
// src/store/app .ts

导出 const useAppStore = defineStore({
  id： 'app'，
  actions() {
    setData(数据) {
      控制台.log(数据)
    }
  } 
})

数据持久化

插件 pinia-plugin-persist 可以辅助实现数据持久化功能。

安装

npm 我 pinia-plugin-persist --保存

使用

// src/store/index.ts

import { createPinia } from 'pinia'
import  piniaPluginPersist 来自 'pinia-plugin-persist'

const store = createPinia()
store.use(piniaPluginPersist)

导出 默认商店

然后在对应的store中启用persist。

export const useUserStore = DefineStore({
 id: '用户',

 state: () => {
 return {
 name: '张三'
 }
 },
 
 // 启用数据缓存 
 persist: {
启用: true
 }
 })

数据默认存储在sessionStorage中，以store id为key。

自定义键

您还可以自定义策略中的键值，并将存储位置从sessionStorage更改为localStorage。

坚持：{
启用：true，
 策略：[
  {
   key：'我的_用户'，
存储：本地存储，
} ]
}

持久部分状态

默认情况下，所有状态都会被 缓存 。可以通过路径指定需要持久化的字段，其他的不会持久化。

状态：() => {
 返回 {  姓名：'张三',
 年龄: 18,
 '男'
}
}，

坚持）：[
  {
      存储：本地存储，| ]
 }
 ]
}

上面我们只持久化姓名和年龄，并将其更改为localStorage，但性别不会持久化。如果其状态发生改变，刷新页面后会丢失，恢复到初始状态，而姓名和年龄号

谢谢

本次分享到此结束。感谢您的阅读。如果这篇文章对你有帮助，别忘了点赞❤️。

本文如有错误或不足之处，欢迎在评论区指正！

结论

我是林三鑫，一名热心前端菜鸟程序员。如果你有动力，喜欢前端，想学前端，那我们可以一起交友钓鱼，哈哈，鱼群，加我吧，请留言[Si No]