脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3新状态管理工具

Vue3新状态管理工具实例详解

 更新时间：2022年03月08日 09:11:30   作者：小小荧  
Vue3公布曾经有一段时间了,它采纳了新的响应式零碎,而且构建了一套全新的 Composition API,下面这篇文章主要给大家介绍了关于Vue3新状态管理工具的相关资料,需要的朋友可以参考下

前言

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

Pinia.js 有如下特点：

  • 完整的 typescript 的支持；
  • 足够轻量，压缩后的体积只有1.6kb;
  • 去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）；
  • actions 支持同步和异步；
  • 没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割；
  • 无需手动添加 store，store 一旦创建便会自动添加；

安装

npm install pinia --save

创建 Store

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

// src/store/index.ts
import { createPinia } from 'pinia'
const store = createPinia()
export default store

在 main.ts 中引入并使用。

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)

State

定义State

在 src/store 下面创建一个user.ts

//src/store/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'user', // id必填，且需要唯一
  state: () => {
    return {
      name: '小小荧'
    }
  }
})

获取 state

<template>
  <div>{{ userStore.name }}</div>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
</script>

也可以结合 computed 获取。

const name = computed(() => userStore.name)

state 也可以使用解构，但使用解构会使其失去响应式，这时候可以用 pinia 的 storeToRefs。

import { storeToRefs } from 'pinia'
const { name } = storeToRefs(userStore)

修改 state

可以像下面这样直接修改 state

userStore.name = '李四'

但一般不建议这么做，建议通过 actions 去修改 state，action 里可以直接通过 this 访问。

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: '张三'
    }
  },
  actions: {
    updateName(name) {
      this.name = name
    }
  }
})
<script lang="ts" setup>
import { useUserStore } from '@/store/user'

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

Getters

export const useUserStore = defineStore({
 id: 'user',
 state: () => {
   return {
     name: '张三'
   }
 },
 getters: {
   fullName: (state) => {
     return state.name + '丰'
   }
 }
})
userStore.fullName // 小小荧丰

Actions

异步 action

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

export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      return data
    }
  }
})

action 间相互调用

action 间的相互调用，直接用 this 访问即可。

 export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      this.setData(data) // 调用另一个 action 的方法
      return data
    },
    setData(data) {
      console.log(data)
    }
  }
})

在 action 里调用其他 store 里的 action 也比较简单，引入对应的 store 后即可访问其内部的方法了。

// src/store/user.ts

import { useAppStore } from './app'
export const useUserStore = defineStore({
  id: 'user',
  actions: {
    async login(account, pwd) {
      const { data } = await api.login(account, pwd)
      const appStore = useAppStore()
      appStore.setData(data) // 调用 app store 里的 action 方法
      return data
    }
  }
})
// src/store/app.ts

export const useAppStore = defineStore({
  id: 'app',
  actions: {
    setData(data) {
      console.log(data)
    }
  }
})

数据持久化

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

安装

npm i pinia-plugin-persist --save

使用

// src/store/index.ts

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

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

export default store

接着在对应的 store 里开启 persist 即可。

export const useUserStore = defineStore({
  id: 'user',
  state: () => {
    return {
      name: '张三'
    }
  },

  // 开启数据缓存
  persist: {
    enabled: true
  }
})

数据默认存在 sessionStorage 里，并且会以 store 的 id 作为 key。

自定义 key

你也可以在 strategies 里自定义 key 值，并将存放位置由 sessionStorage 改为 localStorage。

persist: {
  enabled: true,
  strategies: [
    {
      key: 'my_user',
      storage: localStorage,
    }
  ]
}

持久化部分 state

默认所有 state 都会进行缓存，你可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。

state: () => {
  return {
    name: '张三',
    age: 18,
    gender: '男'
  }  
},

persist: {
  enabled: true,
  strategies: [
    {
      storage: localStorage,
      paths: ['name', 'age']
    }
  ]
}

上面我们只持久化 name 和 age，并将其改为localStorage, 而 gender 不会被持久化，如果其状态发送更改，页面刷新时将会丢失，重新回到初始状态，而 name 和 age 则不会。

最后

以上就是关于 Pinia.js 用法的一些介绍，Pinia.js 的内容还远不止这些，更多内容及使用有待大家自己探索。Pinia文档

到此这篇关于Vue3新状态管理工具的文章就介绍到这了,更多相关Vue3新状态管理工具内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

  • vue跳转页签传参并查询参数的保姆级教程

    vue跳转页签传参并查询参数的保姆级教程

    这篇文章主要介绍了vue跳转页签传参并查询参数的保姆级教程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-04-04
  • Vue动画事件详解及过渡动画实例

    Vue动画事件详解及过渡动画实例

    通过 Vue.js 的过渡系统，可以在元素从 DOM 中插入或移除时自动应用过渡效果。Vue.js 会在适当的时机为你触发 CSS 过渡或动画，你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作
    2019-02-02
  • Vue使用Multiavatarjs生成自定义随机头像的案例

    Vue使用Multiavatarjs生成自定义随机头像的案例

    这篇文章给大家介绍了Vue项目中使用Multiavatarjs生成自定义随机头像的案例,文中通过代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
    2023-10-10
  • 基于vue--key值的特殊用处详解

    基于vue--key值的特殊用处详解

    这篇文章主要介绍了基于vue--key值的特殊用处详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 使用el-form之表单校验自动定位到报错位置问题

    使用el-form之表单校验自动定位到报错位置问题

    这篇文章主要介绍了使用el-form之表单校验自动定位到报错位置问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • VUE+jszip如何实现下载多个文件导出为一个zip格式

    VUE+jszip如何实现下载多个文件导出为一个zip格式

    这篇文章主要介绍了VUE+jszip如何实现下载多个文件导出为一个zip格式方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue2项目使用sass的示例代码

    vue2项目使用sass的示例代码

    本篇文章主要介绍了vue项目使用sass的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue请求接口并且携带token的实现

    vue请求接口并且携带token的实现

    本文主要介绍了vue请求接口并且携带token的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 在vue.js中抽出公共代码的方法示例

    在vue.js中抽出公共代码的方法示例

    这篇文章主要给大家介绍了在vue.js中抽出公共代码的方法，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • 简单的Vue异步组件实例Demo

    简单的Vue异步组件实例Demo

    大家都知道当使用时才装入需要的组件，可以有效的提高首次装入页面的速度。比如在路由切换时，下面这篇文章主要给大家介绍了关于如何实现一个简单的Vue异步组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
    2017-12-12

最新评论