目录

​​6. ajax操作​​

​​6.1 整合 axios​​

​​6.1.1 默认整合​​

​​6.1.2 手动整合（可选）​​

​​6.1.3 常见配置​​

​​6.2 使用axios发送ajax​​

​​6.3 使用asyncData发送 ajax​​

​​6.3.1 发送一次请求​​

​​6.3.2 发送多次请求​​

​​6.4 使用fetch发送 ajax​​

​​6.5 插件：自定义axios​​

​​6.5.0 分析​​

​​6.5.1 客户端​​

​​6.5.2 服务端​​

​​6.5.3 插件配置总结​​

​​6.5.4 服务器端插件使用总结​​

​​7. Vuex 状态树​​

​​7.1 根模块数据操作​​

​​7.2 其他模块数据操作​​

​​7.3 完整vuex模板​​

​​8. nuxt流程总结​​

​​9 综合练习​​

​​9.1 练习1：学生列表​​

​​9.2 练习2：​​

​​9.2.1 表结构：​​

​​9.2.2 需求：查询​​

​​9.2.3 扩展需求：添加​​

6. ajax操作

6.1 整合 axios

6.1.1 默认整合

  • 在构建项目时，如果选择axios组件，nuxt.js将自动与axios进行整合

    • Nuxt.js详解(二)_ios


6.1.2 手动整合（可选）

  • 步骤1：package.json有axios的版本

    • Nuxt.js详解(二)_ajax_02


<span style="background-color:#f8f8f8">  <span style="color:#aa1111">"dependencies"</span>: {
    <span style="color:#aa1111">"@nuxtjs/axios"</span>: <span style="color:#aa1111">"^5.13.1"</span>,
  },</span>
  • 步骤2：安装
<span style="background-color:#f8f8f8">npm install</span>
  • 步骤3：nuxt.config.js 以模块的方式添加axios

    • Nuxt.js详解(二)_ajax_03


<span style="background-color:#f8f8f8">  <span style="color:#000000">modules</span>: [
    <span style="color:#aa5500">// https://go.nuxtjs.dev/axios</span>
    <span style="color:#aa1111">'@nuxtjs/axios'</span>,
  ],</span>

6.1.3 常见配置

  • 修改 nuxt.config.js 进行baseURL的配置

    • Nuxt.js详解(二)_ajax_04


<span style="background-color:#f8f8f8">  <span style="color:#aa5500">// Axios module configuration: https://go.nuxtjs.dev/config-axios</span>
  <span style="color:#000000">axios</span>: {
    <span style="color:#000000">baseURL</span>:<span style="color:#aa1111">'http://localhost:10010/'</span>
  },</span>

6.2 使用axios发送ajax

  • 在vue页面中，通过 this.$axios.xxx() 操作ajax。this.$axios 与之前 axios等效。
<span style="background-color:#f8f8f8"><span style="color:#770088">this</span>.<span style="color:#000000">$axios</span>.<span style="color:#000000">post</span>(<span style="color:#aa1111">"/search-service/search"</span>,<span style="color:#770088">this</span>.<span style="color:#000000">searchMap</span>).<span style="color:#000000">then</span>( <span style="color:#0000ff">res</span> <span style="color:#981a1a">=></span> {
    <span style="color:#aa5500">//获得查询结果</span>
    <span style="color:#770088">this</span>.<span style="color:#000000">searchResult</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">res</span>.<span style="color:#000000">data</span>.<span style="color:#000000">data</span>;
});</span>

6.3 使用asyncData发送 ajax

  • asyncData中的ajax将在“前端服务端执行”，在浏览器看到是数据，而不是ajax程序。

    • Nuxt.js详解(二)_ajax_05


6.3.1 发送一次请求

  • 语法：
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">export</span> <span style="color:#770088">default</span> {
    <span style="color:#000000">async</span> <span style="color:#000000">asyncData</span>( <span style="color:#0000ff">context</span> ) {  <span style="color:#aa5500">//context就相当于其他地方的this</span>
        <span style="color:#aa5500">//发送ajax</span>
        <span style="color:#770088">let</span> { <span style="color:#0000ff">data</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#0055aa">context</span>.<span style="color:#000000">$axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'路径'</span>,<span style="color:#aa1111">'参数'</span>)
        <span style="color:#aa5500">// 返回结果</span>
        <span style="color:#770088">return</span> {<span style="color:#000000">变量</span>: <span style="color:#000000">查询结果从data获取</span> }
    },
}</span></span>
  • 实例
<span style="background-color:#f8f8f8"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#555555">{{echo}}</span><span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>

<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
  <span style="color:#000000">async</span> <span style="color:#000000">asyncData</span>(<span style="color:#0000ff">context</span>) {
    <span style="color:#aa5500">// 发送ajax</span>
    <span style="color:#770088">let</span> {<span style="color:#0000ff">data</span>} <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#0055aa">context</span>.<span style="color:#000000">$axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/service-consumer/feign/echo/abc'</span>)
    <span style="color:#aa5500">// 返回数据</span>
    <span style="color:#770088">return</span> {
      <span style="color:#000000">echo</span>: <span style="color:#0055aa">data</span>
    }
  },
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>

<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>

<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
</span>

6.3.2 发送多次请求

  • 语法1：
<span style="background-color:#f8f8f8"><span style="color:#770088">export</span> <span style="color:#770088">default</span> {
    <span style="color:#000000">async</span> <span style="color:#000000">asyncData</span>( <span style="color:#0000ff">content</span> ) {
        <span style="color:#770088">let</span> [<span style="color:#0000ff">结果1</span>,<span style="color:#0000ff">结果2</span>] <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">Promise</span>.<span style="color:#000000">all</span>([ <span style="color:#000000">ajax请求1</span>, <span style="color:#000000">ajax请求2</span>])
        <span style="color:#770088">return</span> {
            <span style="color:#000000">变量1</span>: <span style="color:#0055aa">结果1</span>,
            <span style="color:#000000">变量2</span>: <span style="color:#0055aa">结果2</span>
        }
    },
}</span>
  • 语法2：
<span style="background-color:#f8f8f8"><span style="color:#770088">export</span> <span style="color:#770088">default</span> {
    <span style="color:#000000">async</span> <span style="color:#000000">asyncData</span>( <span style="color:#0000ff">content</span> ) {
        <span style="color:#770088">let</span> [{<span style="color:#000000">数据</span>:<span style="color:#0000ff">别名1</span>},{<span style="color:#000000">数据</span>:<span style="color:#0000ff">别名2</span>}] <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">Promise</span>.<span style="color:#000000">all</span>([ <span style="color:#000000">ajax请求1</span>, <span style="color:#000000">ajax请求2</span>])
        <span style="color:#770088">return</span> {
            <span style="color:#000000">变量1</span>: <span style="color:#0055aa">别名1</span>,
            <span style="color:#000000">变量2</span>: <span style="color:#0055aa">别名2</span>
        }
    },
}</span>
<span style="background-color:#f8f8f8">//演化过程
let response = ajax请求
let [response,response] = await Promise.all([ajax1,ajax2])
let [{data},{data}] = await Promise.all([ajax1,ajax2])
let [{data:别名1},{data:别名2}] = await Promise.all([ajax1,ajax2])</span>
  • 实例
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span><span style="color:#555555">{{echo}}</span> <span style="color:#555555">{{echo2}}</span><span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>

<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
  <span style="color:#000000">async</span> <span style="color:#000000">asyncData</span>(<span style="color:#0000ff">context</span>) {
    <span style="color:#aa5500">// 发送ajax</span>
    <span style="color:#770088">let</span> [{<span style="color:#000000">data</span>:<span style="color:#0000ff">echo</span>}, {<span style="color:#000000">data</span>:<span style="color:#0000ff">echo2</span>}] <span style="color:#981a1a">=</span> 
                <span style="color:#770088">await</span> <span style="color:#000000">Promise</span>.<span style="color:#000000">all</span>([
                    <span style="color:#0055aa">context</span>.<span style="color:#000000">$axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/service-consumer/feign/echo/abc'</span>),
                    <span style="color:#0055aa">context</span>.<span style="color:#000000">$axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/service-consumer/client/echo/abc'</span>)
                ])

    <span style="color:#aa5500">// 返回数据</span>
    <span style="color:#770088">return</span> {
      <span style="color:#000000">echo</span>,
      <span style="color:#000000">echo2</span>
    }
  },
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>

<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>

<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
</span></span>

6.4 使用fetch发送 ajax

  • fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。

Nuxt.js详解(二)_ios_06

 

  • 步骤1：创建​​store/index.js​​
<span style="background-color:#f8f8f8"><span style="color:#770088">export</span> <span style="color:#770088">const</span> <span style="color:#0000ff">state</span> <span style="color:#981a1a">=</span> () <span style="color:#981a1a">=></span> ({
  <span style="color:#000000">str</span>: <span style="color:#116644">0</span>
})

<span style="color:#770088">export</span> <span style="color:#770088">const</span> <span style="color:#0000ff">mutations</span> <span style="color:#981a1a">=</span> {
  <span style="color:#000000">setData</span> (<span style="color:#0000ff">state</span>, <span style="color:#0000ff">value</span>) {
    <span style="color:#0055aa">state</span>.<span style="color:#000000">str</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">value</span>
  }
}</span>
  • 步骤2：测试页面
<span style="background-color:#f8f8f8"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>
    <span style="color:#aa5500"><!-- 显示数据 --></span>
    <span style="color:#555555">{{$store.state.str}}</span>
  <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>

<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>

<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
  <span style="color:#000000">async</span> <span style="color:#000000">fetch</span>( {<span style="color:#0000ff">store</span>, <span style="color:#0000ff">$axios</span>} ) {
    <span style="color:#aa5500">// 发送ajax</span>
    <span style="color:#770088">let</span> { <span style="color:#0000ff">data</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#0055aa">$axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/service-consumer/feign/echo/abc'</span>)
    <span style="color:#aa5500">// 设置数据</span>
    <span style="color:#0055aa">store</span>.<span style="color:#000000">commit</span>(<span style="color:#aa1111">'setData'</span> , <span style="color:#0055aa">data</span> )
  }
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>

<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>

<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
</span>

6.5 插件：自定义axios

6.5.0 分析

Nuxt.js详解(二)_ios_07

 

6.5.1 客户端

  • 步骤一：在​​nuxt.conf.js​​中配置客户端插件，设置 mode 为 client
<span style="background-color:#f8f8f8">  <span style="color:#000000">plugins</span>: [
    { <span style="color:#000000">src</span>: <span style="color:#aa1111">'~plugins/api.js'</span>, <span style="color:#000000">mode</span>: <span style="color:#aa1111">'client'</span> }
    <span style="color:#aa5500">//{ src: '~plugins/api.js', ssr: false }</span>
  ],</span>
  • 步骤二：编写​​plugins/api.js​​ 对 内置的 $axios进行增强

    • Nuxt.js详解(二)_数据_08


<span style="background-color:#f8f8f8"><span style="color:#aa5500">//自定义函数</span>
<span style="color:#770088">const</span> <span style="color:#0000ff">request</span> <span style="color:#981a1a">=</span> {
  <span style="color:#000000">test</span> : (<span style="color:#0000ff">params</span>) <span style="color:#981a1a">=></span> {
    <span style="color:#770088">return</span> <span style="color:#000000">axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/service-consumer/feign/echo/abc'</span>,{
      <span style="color:#000000">params</span>
    })
  },
}

<span style="color:#770088">var</span> <span style="color:#0000ff">axios</span> <span style="color:#981a1a">=</span> <span style="color:#221199">null</span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> ({ <span style="color:#0000ff">$axios</span> }, <span style="color:#0000ff">inject</span>) <span style="color:#981a1a">=></span> {

  <span style="color:#aa5500">//3） 保存内置的axios</span>
  <span style="color:#000000">axios</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">$axios</span>

  <span style="color:#aa5500">//4) 将自定义函数交于nuxt</span>
  <span style="color:#aa5500">// 使用方式1：在vue中，this.$request.xxx()</span>
  <span style="color:#aa5500">// 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()</span>

  <span style="color:#0055aa">inject</span>(<span style="color:#aa1111">'request'</span>, <span style="color:#000000">request</span>)
}
</span>

6.5.2 服务端

  • 步骤一：配置服务端插件，设置 mode 为 server
<span style="background-color:#f8f8f8">  <span style="color:#000000">plugins</span>: [
    { <span style="color:#000000">src</span>: <span style="color:#aa1111">'~plugins/api.js'</span>, <span style="color:#000000">mode</span>: <span style="color:#aa1111">'client'</span> },
    { <span style="color:#000000">src</span>: <span style="color:#aa1111">'~plugins/api.server.js'</span>, <span style="color:#000000">mode</span>: <span style="color:#aa1111">'server'</span> },
    <span style="color:#aa5500">//{ src: '~plugins/api.js', ssr: false },</span>
    <span style="color:#aa5500">//{ src: '~plugins/api.server.js', ssr: true }</span>
  ],</span>
  • 步骤二：编写​​plugins/api.server.js​​ 对 内置的 $axios进行增强
<span style="background-color:#f8f8f8"><span style="color:#770088">const</span> <span style="color:#0000ff">request</span> <span style="color:#981a1a">=</span> {
  <span style="color:#000000">test</span> : (<span style="color:#0000ff">params</span>) <span style="color:#981a1a">=></span> {
    <span style="color:#770088">return</span> <span style="color:#000000">axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/service-consumer/feign/echo/abc'</span>,{
      <span style="color:#000000">params</span>
    })
  },
  
}

<span style="color:#770088">var</span> <span style="color:#0000ff">axios</span> <span style="color:#981a1a">=</span> <span style="color:#221199">null</span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> ({ <span style="color:#0000ff">$axios</span>, <span style="color:#0000ff">redirect</span>, <span style="color:#0000ff">process</span> }, <span style="color:#0000ff">inject</span>) <span style="color:#981a1a">=></span> {

  <span style="color:#aa5500">//赋值</span>
  <span style="color:#000000">axios</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">$axios</span>

  <span style="color:#aa5500">//4) 将自定义函数交于nuxt</span>
  <span style="color:#aa5500">// 使用方式1：在vue中，this.$requestServer.xxx()</span>
  <span style="color:#aa5500">// 使用方式2：在nuxt的asyncData中，content.app.$requestServer.xxx()</span>
  <span style="color:#0055aa">inject</span>(<span style="color:#aa1111">'requestServer'</span>, <span style="color:#000000">request</span>)
}
</span>
  • 注意：前端服务端插件，不支持切换路由。也就是说刷新可以可以访问，使用​​<nuxt-link>​​切换不能访问。解决方案：修改mode，支持client和service。

6.5.3 插件配置总结

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">//方式1：通过src设置文件，通过mode设置模式</span>
<span style="color:#000000">plugins</span>: [
    { <span style="color:#000000">src</span>: <span style="color:#aa1111">'~/plugins/apiclient.js'</span>, <span style="color:#000000">mode</span>: <span style="color:#aa1111">'client'</span> },      <span style="color:#aa5500">//前端客户端</span>
    { <span style="color:#000000">src</span>: <span style="color:#aa1111">'~/plugins/apiserver.js'</span>, <span style="color:#000000">mode</span>: <span style="color:#aa1111">'server'</span> },      <span style="color:#aa5500">//前端服务端</span>
    { <span style="color:#000000">src</span>: <span style="color:#aa1111">'~/plugins/api.js'</span> }                             <span style="color:#aa5500">//前端客户端 + 前端服务端</span>
]

<span style="color:#aa5500">//方式2：通过命名来确定模式</span>
<span style="color:#000000">plugins</span>: [
    <span style="color:#aa1111">'~/plugins/api.client.js'</span>,              <span style="color:#aa5500">//前端客户端</span>
    <span style="color:#aa1111">'~/plugins/api.server.js'</span>,              <span style="color:#aa5500">//前端服务端</span>
    <span style="color:#aa1111">'~/plugins/api.js'</span>,                     <span style="color:#aa5500">//前端客户端 + 前端服务端</span>
]</span></span>

6.5.4 服务器端插件使用总结

7. Vuex 状态树

7.1 根模块数据操作

  • 步骤一：创建​​store/index.js​​ 添加一个 counter变量，并可以继续累加操作
<span style="background-color:#f8f8f8"><span style="color:#770088">export</span> <span style="color:#770088">const</span> <span style="color:#0000ff">state</span> <span style="color:#981a1a">=</span> () <span style="color:#981a1a">=></span> ({
  <span style="color:#000000">counter</span>: <span style="color:#116644">0</span>
})

<span style="color:#770088">export</span> <span style="color:#770088">const</span> <span style="color:#0000ff">mutations</span> <span style="color:#981a1a">=</span> {
  <span style="color:#000000">increment</span> (<span style="color:#0000ff">state</span>) {
    <span style="color:#0055aa">state</span>.<span style="color:#000000">counter</span><span style="color:#981a1a">++</span>
  }
}
</span>
  • 步骤二：在页面中，使用
<span style="background-color:#f8f8f8"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>
    首页 <span style="color:#555555">{{counter}}</span>
    <span style="color:#117700"><</span><span style="color:#117700">input</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"button"</span> <span style="color:#0000cc">value</span>=<span style="color:#aa1111">"+"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"increment"</span><span style="color:#117700">/></span>
  <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>

<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#770088">import</span> { <span style="color:#0000ff">mapState</span>,<span style="color:#0000ff">mapMutations</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'vuex'</span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
  <span style="color:#000000">computed</span>: {
    <span style="color:#555555">...</span><span style="color:#000000">mapState</span>([<span style="color:#aa1111">'counter'</span>])
  },
  <span style="color:#000000">methods</span>: {
    <span style="color:#555555">...</span><span style="color:#000000">mapMutations</span>([<span style="color:#aa1111">'increment'</span>])
  },
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>

<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>

<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
</span>

7.2 其他模块数据操作

  • 步骤一：创建其他模块​​store/book.js​​
<span style="background-color:#f8f8f8"><span style="color:#770088">export</span> <span style="color:#770088">const</span> <span style="color:#0000ff">state</span> <span style="color:#981a1a">=</span> () <span style="color:#981a1a">=></span> ({
  <span style="color:#000000">money</span>: <span style="color:#116644">0</span>
})

<span style="color:#770088">export</span> <span style="color:#770088">const</span> <span style="color:#0000ff">mutations</span> <span style="color:#981a1a">=</span> {
  <span style="color:#000000">addmoney</span> (<span style="color:#0000ff">state</span>) {
    <span style="color:#0055aa">state</span>.<span style="color:#000000">money</span> <span style="color:#981a1a">+=</span> <span style="color:#116644">5</span>
  }
}</span>
  • 步骤二：使用指定模块中的数据
<span style="background-color:#f8f8f8"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>
    首页 <span style="color:#555555">{{money}}</span>
    <span style="color:#117700"><</span><span style="color:#117700">input</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"button"</span> <span style="color:#0000cc">value</span>=<span style="color:#aa1111">"+"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"addmoney"</span> <span style="color:#117700">/></span>
  <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>

<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#770088">import</span> { <span style="color:#0000ff">mapState</span>,<span style="color:#0000ff">mapMutations</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'vuex'</span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
  <span style="color:#000000">computed</span>: {
    <span style="color:#000000">money</span> () {
      <span style="color:#770088">return</span> <span style="color:#770088">this</span>.<span style="color:#000000">$store</span>.<span style="color:#000000">state</span>.<span style="color:#000000">book</span>.<span style="color:#000000">money</span>
    }
  },
  <span style="color:#000000">methods</span>: {
    <span style="color:#555555">...</span><span style="color:#000000">mapMutations</span>({
      <span style="color:#000000">addmoney</span>: <span style="color:#aa1111">'book/addmoney'</span>
    })
  },
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>

<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>

<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span></span>

7.3 完整vuex模板

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// state为一个函数, 注意箭头函数写法</span>
<span style="color:#770088">const</span> <span style="color:#0000ff">state</span> <span style="color:#981a1a">=</span> () <span style="color:#981a1a">=></span> ({
  <span style="color:#000000">user</span>: <span style="color:#aa1111">'jack'</span>
})

<span style="color:#aa5500">// mutations为一个对象</span>
<span style="color:#770088">const</span> <span style="color:#0000ff">mutations</span> <span style="color:#981a1a">=</span> {
  <span style="color:#000000">setUser</span>(<span style="color:#0000ff">state</span>, <span style="color:#0000ff">value</span>) {
    <span style="color:#0055aa">state</span>.<span style="color:#000000">counter</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">value</span>
  }
}
<span style="color:#aa5500">// action执行mutation</span>
<span style="color:#770088">const</span> <span style="color:#0000ff">actions</span> <span style="color:#981a1a">=</span> {
  <span style="color:#000000">userAction</span> (<span style="color:#0000ff">context</span>,<span style="color:#0000ff">value</span>){
    <span style="color:#aa5500">// 可以发送ajax</span>
    <span style="color:#0055aa">context</span>.<span style="color:#000000">commit</span>(<span style="color:#aa1111">'setUser'</span>,<span style="color:#0055aa">value</span>)
  }

}

<span style="color:#aa5500">// 获取数据</span>
<span style="color:#770088">const</span> <span style="color:#0000ff">getters</span> <span style="color:#981a1a">=</span> {
  <span style="color:#000000">getUser</span> (<span style="color:#0000ff">state</span>) {
    <span style="color:#770088">return</span> <span style="color:#0055aa">state</span>.<span style="color:#000000">user</span>
  }
}
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
  <span style="color:#000000">namespace</span>: <span style="color:#221199">true</span>,  <span style="color:#aa5500">// 命名空间，强制要求，在使用时，加上所属的模块名，例如：book/addmoney</span>
  <span style="color:#000000">state</span>,
  <span style="color:#000000">mutations</span>,
  <span style="color:#000000">actions</span>,
  <span style="color:#000000">getters</span>
}
</span></span>

8. nuxt流程总结

Nuxt.js详解(二)_数据_09

 

9 综合练习

9.1 练习1：学生列表

  • 表结构
<span style="background-color:#f8f8f8"><span style="color:#aa5500">#班级表</span>
<span style="color:#770088">create</span> <span style="color:#770088">table</span> tab_class<span style="color:#999977">(</span>
  cid int <span style="color:#770088">primary</span> <span style="color:#770088">key</span> <span style="color:#770088">auto_increment</span>,
  cname varchar<span style="color:#999977">(</span><span style="color:#116644">50</span><span style="color:#999977">)</span>
<span style="color:#999977">)</span>;
<span style="color:#770088">insert</span> <span style="color:#770088">into</span> tab_class<span style="color:#999977">(</span>cid, cname<span style="color:#999977">)</span> <span style="color:#770088">values</span><span style="color:#999977">(</span><span style="color:#116644">1</span>,<span style="color:#aa1111">'Java56'</span><span style="color:#999977">)</span>;
<span style="color:#770088">insert</span> <span style="color:#770088">into</span> tab_class<span style="color:#999977">(</span>cid, cname<span style="color:#999977">)</span> <span style="color:#770088">values</span><span style="color:#999977">(</span><span style="color:#116644">2</span>,<span style="color:#aa1111">'Java78'</span><span style="color:#999977">)</span>;

<span style="color:#aa5500">#学生表</span>
<span style="color:#770088">create</span> <span style="color:#770088">table</span> tab_student<span style="color:#999977">(</span>
  sid int <span style="color:#770088">primary</span> <span style="color:#770088">key</span> <span style="color:#770088">auto_increment</span>,
  sname varchar<span style="color:#999977">(</span><span style="color:#116644">50</span><span style="color:#999977">)</span>,
  cid int
<span style="color:#999977">)</span>;

<span style="color:#770088">insert</span> <span style="color:#770088">into</span> tab_student<span style="color:#999977">(</span>sname,cid<span style="color:#999977">)</span> <span style="color:#770088">values</span><span style="color:#999977">(</span><span style="color:#aa1111">'张三'</span>,<span style="color:#116644">1</span><span style="color:#999977">)</span>;
<span style="color:#770088">insert</span> <span style="color:#770088">into</span> tab_student<span style="color:#999977">(</span>sname,cid<span style="color:#999977">)</span> <span style="color:#770088">values</span><span style="color:#999977">(</span><span style="color:#aa1111">'李四'</span>,<span style="color:#116644">1</span><span style="color:#999977">)</span>;
<span style="color:#770088">insert</span> <span style="color:#770088">into</span> tab_student<span style="color:#999977">(</span>sname,cid<span style="color:#999977">)</span> <span style="color:#770088">values</span><span style="color:#999977">(</span><span style="color:#aa1111">'王五'</span>,<span style="color:#116644">2</span><span style="color:#999977">)</span>;
<span style="color:#770088">insert</span> <span style="color:#770088">into</span> tab_student<span style="color:#999977">(</span>sname,cid<span style="color:#999977">)</span> <span style="color:#770088">values</span><span style="color:#999977">(</span><span style="color:#aa1111">'赵六'</span>,<span style="color:#116644">2</span><span style="color:#999977">)</span>;
</span>
  • 需求：查询学生列表信息
  • 要求1：可以进行“班级”条件查询
  • 要求2：对“班级”数据进行SEO
  • 要求3：学生数据不进行SEO

9.2 练习2：

9.2.1 表结构：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">CREATE</span> <span style="color:#770088">TABLE</span> tb_teacher<span style="color:#999977">(</span>
  tid INT <span style="color:#770088">PRIMARY</span> <span style="color:#770088">KEY</span> <span style="color:#770088">AUTO_INCREMENT</span>,
  tname VARCHAR<span style="color:#999977">(</span><span style="color:#116644">50</span><span style="color:#999977">)</span> <span style="color:#770088">COMMENT</span> <span style="color:#aa1111">'老师姓名'</span>,
  TYPE INT <span style="color:#770088">COMMENT</span> <span style="color:#aa1111">'老师类型：1.授课老师、2.助理老师、3.辅导员老师'</span>
<span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_teacher<span style="color:#999977">(</span>tid,tname,TYPE<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">1</span>,<span style="color:#aa1111">'梁桐老师'</span>,<span style="color:#116644">1</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_teacher<span style="color:#999977">(</span>tid,tname,TYPE<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">2</span>,<span style="color:#aa1111">'马坤老师'</span>,<span style="color:#116644">2</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_teacher<span style="color:#999977">(</span>tid,tname,TYPE<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">3</span>,<span style="color:#aa1111">'仲燕老师'</span>,<span style="color:#116644">3</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_teacher<span style="color:#999977">(</span>tid,tname,TYPE<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">4</span>,<span style="color:#aa1111">'袁新奇老师'</span>,<span style="color:#116644">1</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_teacher<span style="color:#999977">(</span>tid,tname,TYPE<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">5</span>,<span style="color:#aa1111">'任林达老师'</span>,<span style="color:#116644">2</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_teacher<span style="color:#999977">(</span>tid,tname,TYPE<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">6</span>,<span style="color:#aa1111">'王珊珊老师'</span>,<span style="color:#116644">3</span><span style="color:#999977">)</span>;

<span style="color:#770088">CREATE</span> <span style="color:#770088">TABLE</span> tb_class<span style="color:#999977">(</span>
  cid INT <span style="color:#770088">PRIMARY</span> <span style="color:#770088">KEY</span> <span style="color:#770088">AUTO_INCREMENT</span>,
  cname VARCHAR<span style="color:#999977">(</span><span style="color:#116644">50</span><span style="color:#999977">)</span> <span style="color:#770088">COMMENT</span> <span style="color:#aa1111">'班级名称'</span>,
  teacher1_id INT <span style="color:#770088">COMMENT</span> <span style="color:#aa1111">'授课老师'</span>,
  teacher2_id INT <span style="color:#770088">COMMENT</span> <span style="color:#aa1111">'助理老师'</span>,
  teacher3_id INT <span style="color:#770088">COMMENT</span> <span style="color:#aa1111">'辅导员老师'</span>
<span style="color:#999977">)</span>;

<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_class<span style="color:#999977">(</span>cid,cname,teacher1_id,teacher2_id,teacher3_id<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">1</span>,<span style="color:#aa1111">'Java56'</span>,<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_class<span style="color:#999977">(</span>cid,cname,teacher1_id,teacher2_id,teacher3_id<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">2</span>,<span style="color:#aa1111">'Java78'</span>,<span style="color:#116644">1</span>,<span style="color:#116644">2</span>,<span style="color:#116644">3</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_class<span style="color:#999977">(</span>cid,cname,teacher1_id,teacher2_id,teacher3_id<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">3</span>,<span style="color:#aa1111">'Java12'</span>,<span style="color:#116644">4</span>,<span style="color:#116644">5</span>,<span style="color:#116644">6</span><span style="color:#999977">)</span>;
<span style="color:#770088">INSERT</span> <span style="color:#770088">INTO</span> tb_class<span style="color:#999977">(</span>cid,cname,teacher1_id,teacher2_id,teacher3_id<span style="color:#999977">)</span> <span style="color:#770088">VALUES</span><span style="color:#999977">(</span><span style="color:#116644">4</span>,<span style="color:#aa1111">'Java34'</span>,<span style="color:#116644">4</span>,<span style="color:#116644">5</span>,<span style="color:#116644">6</span><span style="color:#999977">)</span>;
</span></span>

9.2.2 需求：查询

  • 需求：使用“自定义axios”完成
  • 查询班级详情
  • 通过班级名称模糊查询
  • 查询班级的同时，查询老师信息

Nuxt.js详解(二)_ajax_10

 

9.2.3 扩展需求：添加

Nuxt.js详解(二)_数据_11