Vue新一代状态管理工具Pinia的具体使用

3403771864 发布于2022-09-08 22:14 / 941人阅读

　　很多人都在问 pinia是什么？其实它是一个类似的插件，是vuex的最新一代的轻量级状态管理插件，建议安利在很多新项目中其中pinia。

　　Pinia 的优点

　　简便，存储和组件变得很类似，你可以轻松写出优雅的存储。

　　类型安全，通过类型推断，可以提供自动完成的功能。

　　vue devtools 支持，可以方便进行调试。

　　Pinia 支持扩展，可以非常方便地通过本地存储，事物等进行扩展。

　　模块化设计，通过构建多个存储模块，可以让程序自动拆分它们。

　　非常轻巧，只有大约 1kb 的大小。

　　服务器端渲染支持。

　　起步安装

　　npm i pinia

　　核心语法

　　pinia的核心语法有State，Getters，Actions，Plugins以及Stores outside of components（在组件外进行调用）。可以发现跟vuex4相比，pinia少了一个Mutation，在pinia中，是直接使用actions去做状态的修改。在actions中以前我们是通过state.去获得状态，而在这里可以直接通过this. 获取状态

　　可以在src下新建一个store文件夹用来存放pinia相关的东西

　　index.ts
　　import { defineStore } from 'pinia'
　　export const useCounterStore = defineStore('counter', {
　　state: () => {
　　return { count: 0 }
　　},
　　// could also be defined as
　　// state: () => ({ count: 0 })
　　actions: {
　　increment() {
　　this.count++
　　},
　　},
　　})

　　　访问state

　　我们可以直接通过state.访问

　　const store = useStore()
　　store.counter++

　　使用Getters

　　要注意，在pinia中，Getters和state里面不能使用相同的名字

　　export const useStore = defineStore('main', {
　　state: () => ({
　　counter: 0,
　　}),
　　getters: {
　　doubleCount: (state) => state.counter * 2,
　　},
　　})

　　　　Actions

　　　定义和处理业务逻辑

　　export const useStore = defineStore('main', {
　　state: () => ({
　　counter: 0,
　　}),
　　actions: {
　　increment() {
　　this.counter++
　　},
　　randomizeCounter() {
　　this.counter = Math.round(100 * Math.random())
　　},
　　},
　　})

　　　　Pinia实战-登录状态的管理

　　1、新建store文件，在下面index.ts中编辑pinia的使用：

　　2、在state中定义了isAuthenticated表示登录状态，对象user中存放登录的用户信息，初始状态为空

　　在actions中进行定义，setAuth方法判断isAuth的值控制用户的登录状态，setUser方法将用户的信息写入user中

　　import { defineStore } from 'pinia'
　　import {userType} from '../utils/types'
　　export const useAuthStore = defineStore('auth', {
　　state: () => {
　　return { isAuthenticated:false,user: {} }
　　},
　　getters: {
　　getAuthenticated: (state) => state.isAuthenticated,
　　getUser: (state) => state.user,
　　},
　　actions: {
　　setAuth(isAuth:boolean){
　　if(isAuth){
　　this.isAuthenticated = isAuth;
　　}else {
　　this.isAuthenticated = false;
　　}
　　},
　　setUser(user: userType | null){
　　if(user){
　　this.user = user;
　　}else {
　　this.user = {}
　　}
　　}
　　},
　　})

　　定义好了pinia，然后去登录界面使用

　　首先要引入我们在pinia中定义的东西

　　import { useAuthStore } from "../store";
　　const store = useAuthStore();

　　解析token之后，信息保存在decode之中，然后直接通过store的setAuth和setUser方法传入对应的参数

　　// 解析token
　　const decode: userType = jwt_decode(token);
　　store.setAuth(!!decode);
　　store.setUser(decode);

　　　　效果实现

　　在没有登录的时候，也就是还没有token，我们查看控制台vue：

　　可以看到下图登录状态为false，用户信息user中也为空

　　然后我们点击登录，此时token已经保存，然后查看控制台

　　可以看到，用户的信息以及登录状态都获取到了

　　　　同 vuex 的比较

　　Pinia 最初是为了探索 Vuex 下一次迭代可能会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它取而代之的是新的建议。

　　与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的操作，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

GPU云服务器云服务器 vue使用webrtc vue 中使用 webrtc vue怎么使用webRTC vue中使用webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127605.html

Vue 实现网易云音乐 WebApp

摘要：基于等开发一款移动端音乐，界面参考了安卓版的网易云音乐布局适配常见移动端。图标使用阿里巴巴图标库，中间的唱片旋转动画使用了实现。搜索功能实现功能搜索歌手歌单歌曲热门搜索数据节流上拉刷新保存搜索记录。基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp，UI ...

Karuru 2019-08-22 17:16 评论0 收藏0
Vue3实现刷新页面局部内容的示例代码

　　可以用实现局部组件（dom）的重新渲染可以实现页面的局部刷新。有一个最简单办法，我们可以用Vue中的v-if指令来实现。　　我们的思路是：除了上述用Vue中的v-if指令来实现，我们也可以用另一个方法就是新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的beforeRouteEnter守卫中又跳转回原来的页面。　　如下图所示，在Vue3.X中不仅可以实现点击刷新，按...

3403771864 2022-09-19 21:28 评论0 收藏0
vue全家桶网易严选,体验网易严选购物流程

摘要：项目预览线上访问或者二维码扫描项目描述全家桶模仿网易严选浏览，购物流程，好的生活，没那么贵。对状态管理有了进一步的了解在项目过程中每一个组件都应用了这个组件，切换的时候每次当前选中的选项都是第一项成选中状态，究其原因的他们的状态没有共享。项目预览 showImg(https://segmentfault.com/img/remote/1460000009660678?w=1481&h...

alaege 2019-08-20 17:02 评论0 收藏0
面向未来编程（Future-Oriented Programming），建设未来 Vue 生态

摘要：状态管理社区当前最流行的状态管理方案分别是单向数据流的和基于的。目前的现状主要是由于并没有将其底层的曝光出来。是一个开源项目，完全兼容的，拥簇面向未来编程，致力于加速未来生态圈的建设。概要 Vue 的作者尤雨溪最近公布了 3.0 版本最重要的 RFC Vue Function-based API。在 React 推出 Hooks 后不久，Vue 社区也迎来了自己的组件逻辑复用机制。 ...

J4ck_Chan 2019-08-23 18:12 评论0 收藏0