首页小满zs学习vue3 第七章

小满zs学习vue3 第七章

时间: 2025-02-12 14:22:20 浏览: 36

### Vue3 第七章学习资料与教程 #### 7.1 组合式 API 的状态管理 Pinia 在 Vue3 中，Pinia 是官方推荐的状态管理模式和库。相较于 Vuex，Pinia 提供了一个更简洁、直观的接口来管理和共享应用程序中的状态[^2]。 #### 7.2 安装与初始化 Pinia 为了开始使用 Pinia，在项目中安装依赖： ```bash npm install pinia ``` 接着创建一个新的 `store` 文件夹并设置基本结构： ```javascript // store/index.js import { createPinia } from 'pinia' const pinia = createPinia() export default pinia ``` 最后，在主文件中引入并挂载到应用实例上： ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' import pinia from './store' createApp(App).use(pinia).mount('#app') ``` #### 7.3 创建 Store 模块通过定义不同的模块化存储单元，可以更好地组织复杂的应用逻辑。下面是一个简单的计数器例子： ```javascript // store/counter.js import { defineStore } from 'pinia' export const useCounterStore = defineStore('main', { state: () => ({ count: 0, }), actions: { increment() { this.count++ }, }, }) ``` #### 7.4 使用 Store 数据可以在组件内部轻松访问这些数据以及方法： ```html <template> <p>Count is {{ counter.count }}</p> <button @click="increment">Increment</button> </template> <script setup> import { useCounterStore } from '../stores/counter' const counter = useCounterStore() function increment() { counter.increment() } </script> ```

阅读全文