Nuxt学习_基础知识(三)

文章学习来源,nuxt中文网

1. Vuex状态树

对于每个大项目来说,使用状态树(store)和管理状态(state)十分有必要。这也就是为什么Nuxt.js内核实现了Vuex。

1.1 简单用法

nuxt中的vuex在使用方法上与vue上相似

1.1.1 定义一个store

  • /store/index.js
export const state = () => ({
  counter: 0
})

export const mutations = {
  setIniteCount(state, parmas) {
    state.counter = parmas
  },
  increment(state) {
    state.counter ++
  }
}

1.1.2 在页面中使用

<h3 @click="addOne">该用户拥有的水果种类有:{
  
  {counter}}</h3>

import {mapState} from 'vuex'
export default Vue.extend({
  computed: {
    ...mapState(['counter'])
  },
  async asyncData(context) {
    try {
      let { data } = await myAxios.get('/fruits')
      context.store.commit('setIniteCount', data.dataSource.length)  // asyncData中使用context来访问store
      return {
        list: data.dataSource || []
      }
    }catch (err) {
      console.log(err.message)
      // alert(err.message)
    }
  },
   methods: {
    addOne() {
      this.$store.commit('increment')
    }
  },
})

1.2 模块化

上述示例中,只创建了一个store/index.js文件,后续堆砌会变得非常的冗余,此时我们需要将功能提炼一下,将相同功能的相关状态和操作放在单独的文件中,便于维护和扩充以及定位问题。例如,我们需要创建一个todo事项的存储信息

1.2.1 定义状态及操作

  • store/todo.js 定义待办项的列表信息、增加
### Nuxt.js 服务端渲染(SSR)教程和最佳实践 Nuxt.js 是基于 Vue.js 构建的一个框架,专注于简化服务端渲染(SSR)的应用程序开发过程。以下是关于 Nuxt.js 的 SSR 功能及其最佳实践的详细介绍。 #### 1. 安装与初始化 为了快速启动一个支持 SSR 的 Nuxt.js 项目,可以通过 `create-nuxt-app` 脚手架工具来完成项目的搭建[^4]。运行以下命令即可: ```bash npx create-nuxt-app my-nuxt-project cd my-nuxt-project npm run dev ``` 这会生成一个基础配置好的 Nuxt.js 项目结构,并自动启用默认的服务端渲染模式。 --- #### 2. 配置文件设置 在 Nuxt.js 中,默认启用了服务端渲染模式(Universal Mode),但也可以通过修改 `nuxt.config.js` 来调整渲染方式。例如,在生产环境中推荐保持默认的 SSR 设置: ```javascript export default { ssr: true, // 启用服务端渲染 target: 'server', // 使用 server 渲染目标 } ``` 此配置确保页面首次加载时由服务器生成 HTML 内容并发送给客户端,从而提高首屏加载速度和搜索引擎优化效果。 --- #### 3. 页面组件中的数据预取 Nuxt.js 支持两种主要的数据预取机制:`asyncData()` 和 `fetch()` 方法。这些方法允许开发者在页面渲染之前从 API 获取所需数据。 - **`asyncData()`**: 此函数会在导航到该页面之前被调用,适用于需要将返回的数据映射到组件状态的情况。 ```javascript export default { async asyncData({ $axios }) { const data = await $axios.$get('https://api.example.com/data'); return { items: data }; } } ``` - **`fetch()`**: 主要用于更新现有组件的状态而不影响响应式绑定。 ```javascript export default { data() { return { items: [] }; }, async fetch() { this.items = await this.$axios.$get('https://api.example.com/data'); } } ``` 这两种方法都可以在服务端执行,因此非常适合用来抓取初始数据以增强 SEO 表现[^2]。 --- #### 4. 动态路由处理 当涉及到动态路径参数时,可以在 `pages/` 目录下创建带有 `_id.vue` 或其他占位符名称的文件来匹配 URL 参数。例如,如果想实现 `/post/:id` 这样的动态路由,则需建立如下目录结构[^5]: ``` /pages/post/_id.vue ``` 在模板内部可通过 `$route.params.id` 访问传递过来的具体 ID 值。 --- #### 5. Layouts 与 Components 结合使用 Nuxt.js 提供了一种简单的方式来管理全局布局设计——即通过 `layouts/` 文件夹定义不同的页面样式组合。对于通用部分如头部菜单栏、底部版权信息等内容,可以集中放置于某个特定 layout 下;而对于独立区域则继续沿用标准 component 开发流程。 --- #### 6. 性能优化建议 除了上述核心知识点外,还需要注意一些额外的最佳实践来进一步改善用户体验: - **懒加载模块**:利用 Webpack 的按需加载特性减少初次进入网站所需的资源体积; - **图片压缩与 CDN 加速**:针对多媒体素材采取适当手段降低传输成本; - **缓存策略制定**:合理运用 HTTP 缓存头控制浏览器存储行为以便重复访问更快捷[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值