一个网站可以设多少关键词,住房公积金个人提取,su域名注册,wordpress php7 兼容大家好#xff0c;欢迎来到程序视点#xff01;我是小二哥#xff01;
前言
在VUE项目开发中#xff0c;一些数据常常被多个组件频繁使用#xff0c;为了管理和维护这些数据#xff0c;就出现了状态管理模式。
今天小二哥要给大家推荐的不是VueX#xff0c;而是称为新…大家好欢迎来到程序视点我是小二哥
前言
在VUE项目开发中一些数据常常被多个组件频繁使用为了管理和维护这些数据就出现了状态管理模式。
今天小二哥要给大家推荐的不是VueX而是称为新一代的状态管理工具的Pinia.js。
关于Pinia.js
Pinia.js 由 Vue.js团队成员所开发的是新一代的 Vuex即 Vuex5.x在 Vue3.0 项目的使用中备受推崇。 它已经加入官方团队了哦
Pinia.js 定位和特点
完整的 typescript 的支持极其轻量压缩后的体积只有1.6kb;去除 mutations只有 stategettersactions这是我最喜欢的一个特点actions 支持同步和异步没有模块嵌套只有 store 的概念能够构建多个 storestore 之间可以自由使用更好的代码分割关联 Vue Devtools 钩子提供更好地开发体验
使用
安装脚手架vite
首先确保使用的脚手架是vite
// 安装vitenpm init vitelatest安装依赖
npm install pinia --save以上安装完成之后可以在项目根目录的package.json文件内找到相关的信息(部分片段) {dependencies: {pinia: ^2.0.11,vue: ^3.2.25},devDependencies: {vitejs/plugin-vue: ^2.2.0,vite: ^2.8.0}}优化改造
因为需要在整个项目使用状态管理因此需要在 main.js 文件里配置以使它应用到整个应用(app) // main.jsimport { createApp } from vueimport App from ./App.vue// 导入构造函数import { createPinia } from pinia// 实例化 Piniaconst pinia createPinia()// 创建Vue应用实例appconst app createApp(App)// 应用以插件形式挂载Pinia实例app.use(pinia)app.mount(#app)定义状态仓库 // src/store/index.js// 引入仓库定义函数import { defineStore } from pinia// 传入2个参数定义仓库并导出// 第一个参数唯一不可重复字符串类型作为仓库ID以区分仓库// 第二个参数以对象形式配置仓库的state,getters,actions// 配置 state getters actionsexport const mainStore defineStore(main, {// state 类似组件的data选项函数形式返回对象state: () {return {msg: 程序视点,counter: 0}},getters: {},actions: {}})类似vuex单独一个文件定义状态仓库并导出。 读取仓库内状态并改变 在需要使用状态的组件内需要先导入状态仓库 import { mainStore } from ../store/index.js;再实例化仓库函数 const store mainStore();即可使用。
Store中State读取和修改
storeToRefs响应式函数 templatebutton clickhandleClick修改状态数据/button!-- 模板内不需要加.value --p{{store.counter}}/p!-- 或者使用解构之后的 --p{{counter}}/p/templatescript setup// 导入状态仓库import { mainStore } from ../store/index.js;// 使普通数据变响应式的函数 import { storeToRefs } from pinia;// 实例化仓库const store mainStore();// 解构并使数据具有响应式const { counter } storeToRefs(store);// 点击 1;function handleClick() {// ref数据这里需要加.value访问counter.value;}/script可以像下面这样直接修改 state,但一般不建议这么做。
store.counter 1;通过 actions 去修改 state
action 里可以直接通过 this 访问。
export const mainStore defineStore(main, {// state 类似组件的data选项函数形式返回对象state: () {return {msg: 程序视点,counter: 0}},getters: {},actions: {updateCount(){this.counter 1;}}})script langts setup
import { mainStore } from ../store/index.js;
const store mainStore();userStore.updateCount();
/script$patch方法
对象形式修改
前面介绍的是少量数据的变更如果涉及数据比较多则推荐使用仓库实例的$patch方法批量修改虽然看起来和前面的几乎没有区别但是会加快修改速度对程序的性能有很大的好处。$patch传入一个对象对象的属性就是各种状态。 templatebutton clickhandleClick修改状态数据/buttonp{{msg}}/p!-- 或者使用解构之后的 --p{{counter}}/p/templatescript setup// 导入状态仓库import { mainStore } from ../store/index.js;// 使普通数据变响应式的函数 import { storeToRefs } from pinia;// 实例化仓库const store mainStore();// 解构并使数据具有响应式const { msg,counter } storeToRefs(store);// 点击 1;修改字符串function handleClick() {store.$patch({msg: pinia good!,counter: counter.value 1,});}/script函数形式
上面例子中的$patch也可以传入一个函数函数参数为state状态 templatebutton clickhandleClick修改状态数据/buttonp{{msg}}/p!-- 或者使用解构之后的 --p{{counter}}/p/templatescript setup// 导入状态仓库import { mainStore } from ../store/index.js;// 使普通数据变响应式的函数 import { storeToRefs } from pinia;// 实例化仓库const store mainStore();// 解构并使数据具有响应式const { msg,counter } storeToRefs(store);// 点击 1;修改字符串function handleClick() {store.$patch((state) {state.msg pinia good!;state.counter;});}/script以上就是关于 Pinia.js 用法的一些介绍。关于Pinia.js的基础操作可以通过下方阅读原文查看。Pinia.js 的内容还远不止这些更多内容及使用有待大家自己探索。 Pinia官方文档 https://pinia.vuejs.org/ 写在最后
【程序视点】助力打工人减负从来不是说说而已
后续小二哥会继续详细分享更多实用的工具和功能。持续关注这样就不会错过之后的精彩内容啦
如果这篇文章对你有帮助的话别忘了【点赞】【分享】支持下哦~
