网站加入购物车的代码,企业网站货物查询怎么做,如何攻克房地产网站,史志网站建设本节重点#xff1a; pinia是什么pinia怎么用 pinia是什么
vue中组件间的数据传递#xff1a;
app.config.globalProperties#xff1a;能够被应用内所有组件实例访问到的全局属性的对象props#xff1a;父传子用provide#xff1a;父传后代用
想象下有咩有哪些数据存储… 本节重点 pinia是什么pinia怎么用 pinia是什么
vue中组件间的数据传递
app.config.globalProperties能够被应用内所有组件实例访问到的全局属性的对象props父传子用provide父传后代用
想象下有咩有哪些数据存储是上述没法存的吗一般随着项目越来越复杂一个项目都是有多个菜单组成的例如一个收费系统可以包含入网、客户资料管理、客户收费、组织机构管理、权限角色管理等模块。模块和模块之间或者有的菜单和菜单之间有些数据是共享的例如用户信息、登录用户的权限信息等。这些内容是无法使用上述3块内容的。 Pinia 是Vue的专属状态管理库允许跨组件或页面共享状态。优点
简单易用API 设计简洁直观学习成本低。类型安全在 TypeScript 项目中能提供良好的类型支持。模块化设计方便代码的组织和维护。 使用
安装和初始化
pnpm install pinia
// main.js
import { createApp } from vue;
import { createPinia } from pinia;
import App from ./App.vue;const app createApp(App);
const pinia createPinia();app.use(pinia);
创建和使用
在项目的 src 目录下创建一个 stores 文件夹用于存放所有的 Store 文件。在 stores 文件夹中创建一个 counter.ts文件。
这个文件结构优点想vue2 的选项式api的模式定义好几个模块什么内容放在什么下面即可。
// src/stores/counter.js
import { defineStore } from pinia;export const useCounterStore defineStore(counter, {// 定义状态state: () ({count: 0}),// 定义 getters类似于计算属性getters: {doubleCount: (state) state.count * 2},// 定义 actions用于修改状态actions: {increment() {this.count;}}
});
上述代码中
defineStore 是 Pinia 提供的一个函数用于定义一个 Store命名要求都以use开头store结尾。counter 是 Store 的唯一 id用于区分不同的 Store。state 是一个函数返回一个对象包含了 Store 的初始状态。getters 是一个对象包含了一些计算属性用于获取状态的派生值。actions 是一个对象包含了一些方法用于修改状态。
使用
templatediv!--模板中就可以使用了 --pCount: {{ counterStore.count }}/ppDouble Count: {{ counterStore.doubleCount }}/pbutton clickcounterStore.incrementIncrement/button/div
/templatescript setup
// 引入了 useCounterStore 函数
import { useCounterStore } from ../stores/counter;// 调用 useCounterStore 函数获取 counter Store 的实例
const counterStore useCounterStore();
/script 访问其他store
// src/stores/counter.js
import { defineStore } from pinia;
import { useAuthStore } from ./auth-storeexport const useCounterStore defineStore(counter, {// 定义状态state: () ({count: 0,preferences: null,}),// 定义 getters类似于计算属性getters: {doubleCount: (state) state.count * 2},// 定义 actions用于修改状态actions: {increment() {this.count;},async fetchUserPreferences() {const auth useAuthStore()if (auth.isAuthenticated) {this.preferences await fetchPreferences()} else {throw new Error(User must be authenticated)}},}
});
响应式解构
从 Store 中解构出状态时默认情况下会失去响应式。为了保持响应式可以使用 storeToRefs 函数
templatedivpCount: {{ count }}/pbutton clickincrementIncrement/button/div
/templatescript setup
import { useCounterStore } from ../stores/counter;
import { storeToRefs } from pinia;const counterStore useCounterStore();
const { count } storeToRefs(counterStore);
const { increment } counterStore;
/script 项目中的最佳实践
模块化设计
将不同业务模块的状态分别存放在不同的 Store 文件中例如用户信息存放在 user.js 中商品信息存放在 product.js 中这样可以提高代码的可维护性。 合理使用 getters 和 actions
getters用于获取状态的派生值避免在组件中重复计算。
actions用于修改状态将复杂的业务逻辑封装在 actions 中使组件的代码更加简洁。 状态持久化
在实际项目中有些状态需要持久化比如用户的登录状态。可以使用 pinia-plugin-persistedstate 插件来实现状态的持久化
pnpm install pinia-plugin-persistedstate // main.js
import { createApp } from vue;
import { createPinia } from pinia;
import piniaPluginPersistedstate from pinia-plugin-persistedstate;
import App from ./App.vue;const app createApp(App);
const pinia createPinia();
pinia.use(piniaPluginPersistedstate);app.use(pinia);
app.mount(#app);
然后在 Store 中配置持久化
// src/stores/counter.js
import { defineStore } from pinia;
import { useAuthStore } from ./auth-storeexport const useCounterStore defineStore(counter, {// 定义状态state: () ({count: 0,preferences: null,}),// 定义 getters类似于计算属性getters: {doubleCount: (state) state.count * 2},// 定义 actions用于修改状态actions: {increment() {this.count;},async fetchUserPreferences() {const auth useAuthStore()if (auth.isAuthenticated) {this.preferences await fetchPreferences()} else {throw new Error(User must be authenticated)}},},// 配置持久化persist: true
}); 继续下一节零基础Vue入门7——状态管理Pinia-CSDN博客 若碰到其他的问题 可以私信我 一起探讨学习 如果对你有所帮助还请 点赞 收藏 谢谢~ 关注收藏博客 持续更新中欢迎订阅专栏
