23年用vuex进行状态管理out了,都开始用pinia啦!
1 Vue2项目中,Vuex状态管理工具,几乎可以说是必不可少的了。而在Vu3中,尤大大推荐我们使用pinia(拍你啊)进行状态管理,咱得听话,用就完了。
使用之前我们来看一下,使用 pinia 给我们带来哪些好处?
官网介绍:Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态
个人理解:在我看来就是变态版 vuex,听说是为了尊重原作者,所以给改名了叫 pinia(拍你啊)
看看都有啥变态的
- 兼容 vue2、vue3,该说不说这一点 vuex 也支持
- Typescript 支持更友好
- 体积小,1kb 左右,vuex 350k 以上
- 支持插件扩展和服务器端渲染 ssr
- pinia 只有 state、getter、action,抛弃了 Vuex 中的 Mutation。
- mutation 干啥了?vuex 中改/处理变数据源 store 数据的集合(唯一的),必须是同步。
- 我们需要在组件里面调用 dispatch() 方法提交 Actions
- Actions 再通过 commit 方法提交 mutations
- 通过 mutations 里面的方法修改 state(数据)
- 最后 render 到组件里面
- 为啥同步?
- mutation 中如果写异步 Le,commit 在触发 mutation 事件时,异步的回调函数不知道是什么时候执行的,所以在 devtools 中难以追踪变化了
- mutation 干啥了?vuex 中改/处理变数据源 store 数据的集合(唯一的),必须是同步。
- pinia 中 action 支持同步和异步。上面也说了下为啥,还不知道为啥可以搜一下为啥。
- 不用创建各个模块嵌套了。Vuex 中才分不同模块我们需要用到 modules:模块化拆分。在 pinia 中每个 store 都是独立的,互相不影响,没啥事。
用 vue3 demo 讲解 pinia 的使用。
1、搭建项目、安装以来
Vue3 + TS + Vite 项目
参考:Vue3.x 全家桶+vite+TS-搭建 Vue3.x 项目
参考:vue3 学习
1). 创建项目
npm create vite@latest my-vite-app --template vue-ts
2). 安装 pinia 依赖
npm install pinia
3).全局挂在 pinia
我们在 main.ts 主文件中,引入 pinia 的createPinia 方法, 创建根存储,以方便全局调用。
import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount("#app");
2、搞正事,创建数据仓库 store
应用场景:
. 多个视图依赖于同一状态。
. 来自不同视图的行为需要变更同一状态。
我们需要用到 pinia 的defineStore() 方法,创建一个 store。
defineStore:
- 参数 1:(name) store 的唯一标识 id。也就是 vuex 中 modules:模块化拆分的模块标识
- 参数 2:(options) 相关配置,通俗来讲就是数据,和修改数据的一系列方法 state、getter、action 都在这里
创建后编写代码如下:
/src/store/piniaStore.ts
import { defineStore } from 'pinia'
export const useUsersStore = defineStore('pinia_id', {
})
3、组件中调用 pinia
我们在上一步已经引入了 pinia,并且在 store 文件下创建了一个叫 piniaStore 的 store,接下来让我们看看在组件里如何调用
<script setup lang="ts">
import { useUsersStore } from "../src/store/piniaStore";
const store = useUsersStore();
console.log(store);
</script>
方法很简单一个 useUsersStore 方法搞定,我们看一下打印内容:
$dispose: f $dispose()$id: "pinia_id"
$onAction: f ()
$patch: f $patch(partialStateOrMutator)
$reset: f Sreset()
$subscribe: Ssubscribe(callback, options2 = ) const removeSubscription = addSuoscription(suhotUpdate: (newStore) => f...]
也就这些哈,没啥玩楞。
4、state 属性
我们往 store 里加点数据源 state 吧!
export const useUsersStore = defineStore("pinia_id", {
state: () => {
return {
age: 20,
message:'我来存放公共数据哈!'
sex: "男",
};
},
});
4.1 读取 state 数据
回想一下 vuex 怎么访问的
- 组件中访问 State 中数据的第一种方式:
this.$store.state.全局数据名称
- 组件中访问 State 中数据的第二种方式:
// 从vuex中按需导入mapState函数
import { mapState } from 'vuex'
// 将全局数据 因设为当前组件的计算属性
computed: {
...mapState(['count'])
}
pinia 如何访问呢?
其实我们定义的 state 数据就在 useUsersStore 内,我们自行就可以直接拿到相关数据
<template>
<p>描述:{{ message }}</p>
<p>年龄:{{ age }}</p>
<p>性别:{{ sex }}</p>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useUsersStore } from "../src/store/piniaStore";
const store = useUsersStore();
const message = ref<string>(store.message);
const age = ref<number>(store.age);
const sex = ref<string>(store.sex);
</script>
当然我们也可以用 es6 解构赋值来优化一下
const { message, age, sex } = store;
4.2 多个组件使用 state
我们使用 pinia 更想做到多组件公用统一数据,新建一个 Child.vue 其实用法很简单直接调用使用即可
<template>
<p>我是一个子元素</p>
<p>描述:{{ message }}</p>
<p>年龄:{{ age }}</p>
<p>性别:{{ sex }}</p>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useUsersStore } from "../src/store/piniaStore";
const store = useUsersStore();
const { message, age, sex } = store;
</script>
4.3 修改 state 数据
我们在回想一下 vuex 怎么修改的
- 有人很暴力:直接 this.$store.state.全局数据名称 直接去修改,这种方式很难查看数据是被什么组件修改
- mutation 修改
① 只能通过 mutation 变更 store 数据,不可以直接操作 store 中的数据
② 通过这种方式虽然操作起来繁琐,但是可以集中监控所有数据的变化
看看 pinia
其实如果想要修改修改 store 中的数据,可以直接重新赋值
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<p>年龄:{{ age }}</p>
<button @click="changeAge">年龄不对</button>
</template>
<script setup lang="ts">
import child from './child.vue';
import { useUsersStore } from "../src/store/piniaStore";
const store = useUsersStore();
const { nage,} = store;
const changeAge = () => {
store.age = 26;
console.log(store);
};
</script>
打印可也看出。store 中 age 数据发生了改变,再看看,呦呵,页面没响应。
我们可能去监听 store 数据变化然后刷新页面,但有个更好的方法等着我们
pinia 的storeToRefs 方法把我们的 state 变得具有响应
import { storeToRefs } from 'pinia';
const store = useUsersStore();
const { message, age, sex } = storeToRefs(store);
4.4 初始化/重置 state 数据
store 的$reset()方法为我们提供了 state 数据重置的可能
<button @click="onResetData">重置store</button>
const onResetData = () => {
store.$reset();
};
4.5 store 的$patch 方法批量修改数据
- 全部调整:此方法需要一次性将 state 中的所有字段例举出。
store.$patch({
message: "批量搞事情",
age: 100,
sex: "女",
});
- 部分修改: $patch 方法接收一个回调函数,用来修改部分数据
store.$patch((state) => {
state.items.push({ message: 'shoes', quantity: 1 })
state.hasChanged = true
})
4.6 直接替换 state
store.$state = { counter: 666, name: 'yup' }
5、getter 属性
Getter 用于对 Store 中的数据进行加工处理形成新的数据
- Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性,不会影响到原本的数据
- Store 中的数据发生变化,Getter 的数据也会跟着变化
5.1 添加 getter
export const useUsersStore = defineStore("pinia_id", {
state: () => {
return {
age: 25,
sex: "男",
};
},
getters: {
getAddAge: (state) => {
return state.age + 100;
},
},
});
5.2 调用 getter
- 直接在标签上使用 getter 定义的方法,这种方式是响应式的,可以直接监听到变化,其实 state 标签直接调用也是一样相应的
<template>
<p>新年龄:{{ store.getAddAge }}</p>
<button @click="patchStore">批量修改数据</button>
</template>
<script setup lang="ts">
import { useUsersStore } from "../src/store/piniaStore";
const store = useUsersStore();
// 批量修改数据
const patchStore = () => {
store.$patch({
age: 100,
sex: "女",
});
};
</script>
- getter 中调用其它 getter
这里需要注意一下,不要箭头函数
export const useUsersStore = defineStore("users", {
state: () => {
return {
age: 25,
sex: "男",
};
},
getters: {
getAddAge: (state) => {
return state.age + 100;
},
getNameAndAge(): string {
return this.name + this.getAddAge; // 调用其它getter
},
},
});
5.3 getter 传参
上文提到 getter 与计算属性差不多,想想计算属性怎么传递的呢?
computed:{
getNewName(){
function (str){
return str+this.name
}
}
}
看一下 getter 的
<p>新年龄:{{ store.getAddAge(1100) }}</p>
getters: {
getAddAge: (state) => {
return (num: number) => state.age + num;
},
getNameAndAge(): string {
return this.name + this.getAddAge; // 调用其它getter
},
},
6. actions 属性
对数据进行逻辑加工,完成默写特定的业务逻辑。和 vue 组件代码中的 methods 相似,存放一些处理业务逻辑的方法。
6.1 添加 actions
export const useUsersStore = defineStore("pinia_id", {
state: () => {
return {
message: "",
age: 25,
sex: "男",
name:'王'
};
},
getters: {
getAddAge: (state) => {
return (num: number) => state.age + num;
},
getNameAndAge(): string {
return this.name + this.getAddAge; // 调用其它getter
},
},
actions: {
saveName(name: string) {
this.name = name;
},
},
});
6.2 使用 actions
const saveName = () => {
store.saveName("我用来调用action内的方法");
};
至此文章结束!
23年用vuex进行状态管理out了,都开始用pinia啦!的更多相关文章
- 理解vuex的状态管理模式架构
理解vuex的状态管理模式架构 一: 什么是vuex?官方解释如下:vuex是一个专为vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证以一种可预测的 ...
- vuex vue状态管理
第一步安装vuex(安装在生产环境) npm install vuex 第二步 src下新建store文件夹 用来专门放状态管理,store文件夹下新建四个js文件 index.js actions ...
- Vuex实现状态管理
Vuex使用总结 1 Vuex简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,Vuex抽取了各个组件的共享部分,以全局单例模式进行状态的管理.在原生vue中各个组件之间传值使用的 ...
- vue2.0 仿手机新闻站(三)通过 vuex 进行状态管理
1.创建 store 结构 2.main.js 引入 vuex 3. App.vue 组件使用 vuex <template> <div id="app"&g ...
- Vuex,状态管理模式
对于 Vue 本人目前接触不深,只得浅层分析,Vue 是单向数据流, state,驱动应用的数据源: view,以声明方式将 state 映射到视图: actions,响应在 view 上的用户输入导 ...
- Vuex.js状态管理共享数据 - day8
VScode文件目录: amount.vue代码如下: <template> <div> <!-- <h3>{{ $store.state.count }}& ...
- vuex的状态管理模式
1.store.js Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)) state:存放数据. mutations:提交状态 ...
- 举个例子去理解vuex(状态管理),通俗理解vuex原理,通过vue例子类比
通俗理解vuex原理---通过vue例子类比 本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...
- 23 Flutter官方推荐的状态管理库provider的使用
加群452892873 下载对应21可文件,运行方法,建好项目,直接替换lib目录,在往pubspec.yaml添加上一下扩展. cupertino_icons: ^ flutter_swiper: ...
- Vuex 模块化实现待办事项的状态管理
前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸 ...
随机推荐
- PHP 实现大文件视频推流
/** * 视频推流 * 返回视频流 */ function bofang(){ set_time_limit(0); ini_set('max_execution_time', 0);//秒为单位, ...
- python 之列表(list)处理
列表(list) 创建一个列表,只要把逗号分隔的不同的数据项使用方括号括起来即可,一个列表中的数据类型可以各不相同,可以同时分别为整数.实数.字符串等基本类型,甚至是列表.元组.字典.集合以及其他自定 ...
- 浅聊一下Django如何避免xss攻击
一.什么是xss攻击 xss攻击:----->web注入 xss跨站脚本攻击(Cross site script,简称xss)是一种"HTML注入",由于攻击的脚本多数时候是 ...
- ctfshow——萌新web3
题目如下: 源码分析: 通过id可以传入一个参数,对id的值进行了过滤,这里是正则匹配过滤,内容分析:or,-,\,*,<,>,!,x,hex,+.最外面的i是同时匹配过滤内容的大小写.在 ...
- 【转载】EXCEL VBA Workbook、Worksheet、Range的选择和操作
Workbooks对象是Microsoft Excel 应用程序中当前打开的所有 Workbook 对象的集合.有close.add.open等方法. Workbooks.close ...
- [常用工具] PyAutoGUI使用教程
PyAutoGUI使用教程 目录 PyAutoGUI使用教程 1 基础知识 2 一般函数 3 故障保险 4 鼠标函数 4.1 鼠标移动 4.2 鼠标拖动 4.3 鼠标单击 4.4 鼠标滚动 4.5 鼠 ...
- 对于goland相对较新一些版本新建项目时没用go mod模式选项的坑
前言 对于一些小白在网上看很早的一些go视频,使用goland2020.3.x版本或者其之前版本创建新项目,里面会有GO Modules(vgo)这个选项,也就是gomod模式创建新项目,然而对于现在 ...
- 前菜--Numpy
import numpy as np NumPy : numberial python NumPy的核心:数据结构 ndarray 1.1 数组方法 np.array 创建数组 基本语法:np.arr ...
- angular建立服务打印日志创建全局变量方法有两种,手工创建,依赖注入
- vue-admin-template 单页面刷新 404 问题
vue-admin-template (vue-element-admin)是个非常好用的B端UI框架,谁用谁知道! 在使用的过程中,加入权限模块后,刷新后权限控制的页面就默认跳转到404页面了,搞了 ...