import使用方法总结

import使用方法总结

参考 JS ES6中export和import详解

import的静态加载用法
  1. import {fn, name, age} from “…/” 名字和export的必须相同
  2. import AnyName from “…/” 对应export default
  3. import {oldName as newName} from “…” 起别名
  4. import * as circles from “…/” 全量引入
import的动态加载用法

import("…/") 可以用于加载css文件 或 按需加载路由等等

### Pinia 使用方法与总结 #### 1. **Pinia 基本概念** Pinia 是一个新的状态管理库,旨在帮助开发者在 Vue.js 应用程序中跨组件管理和存储响应式数据和状态[^1]。它由 Vue 核心团队成员之一 Eduardo San Martin Morote 开发。 #### 2. **安装与初始化** 要在项目中使用 Pinia,首先需要通过 npm 安装该库: ```bash npm install pinia ``` 接着,在 `main.js` 或 `main.ts` 文件中引入并注册 Pinia 到 Vue 应用实例中: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import { createPinia } from 'pinia'; const app = createApp(App); const pinia = createPinia(); app.use(pinia); app.mount('#app'); ``` 此部分代码展示了如何将 Pinia 注册到 Vue 应用中[^2]。 #### 3. **定义 Store** Pinia 的核心是 Store,它是用于保存应用状态的对象。可以通过调用 `defineStore` 方法来创建一个 store: ```javascript // ./stores/counter.js import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++; }, decrement() { this.count--; }, }, }); ``` 在此示例中,`useCounterStore` 被定义为一个名为 `'counter'` 的 store,其中包含了初始状态 `count` 和两个操作方法 `increment` 及 `decrement`[^2]。 #### 4. **访问 State 和 Actions** 在任何组件中都可以轻松访问已定义的 store: ```javascript <template> <div> Count: {{ counter.count }} <button @click="counter.increment">Increment</button> <button @click="counter.decrement">Decrement</button> </div> </template> <script setup> import { useCounterStore } from '../stores/counter'; const counter = useCounterStore(); </script> ``` 这段代码演示了如何在一个 Vue 组件中使用之前定义好的 `counter` store 来显示当前计数值以及提供按钮触发增减逻辑。 #### 5. **持久化状态 (Persistence)** 如果希望某些状态能够在页面刷新后仍然保留,则可以利用插件实现状态持久化。例如,借助 `pinia-persistedstate-plugin` 插件完成这一目标: ```javascript import { createPinia } from 'pinia'; import { createPersistedState } from 'pinia-persistedstate-plugin'; const pinia = createPinia(); const persist = createPersistedState(); pinia.use(persist); export default pinia; ``` 上述配置使得所有被标记的状态能够自动保存至本地存储或其他指定位置[^3]。 --- ### 总结 Pinia 提供了一种简洁而强大的方式来进行 Vue.js 状态管理。相比 Vuex 更加灵活易懂,并且支持 TypeScript 出色。其主要特点包括但不限于简单直观 API 设计、内置对 TypeScript 支持良好以及易于扩展等功能特性[^1][^2][^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值