Vue-----全家桶Nuxt.js(学习二)

1. 目录结构

2. 别名

在nuxt.js的vue页面中，如果需要引入assets或者static等目录中的资源，可以使用~或~~。

3. 路由

Nuxt.js依据pages目录结构自动生成vue-router模块的路由配置。
要在页面之间使用路由，我们建议使用<nuxt-link>标签。
<router-link>是vue原生态切换路径标签。
<nuxt-link>在原生态的基础上，进行有关nuxt增强。(官方实例:https://zh.nuxtjs.org/examples/named-views/)

静态路由

动态路由

动态嵌套路由

动态路由命名

路径“/news/123”匹配“_id.vue”还是“_name.vue”？
我们可以使用<nuxt-link>解决以上问题

<nuxt-link:to="{name:'news-id',params:{id:1002}}">第2新闻</nuxt-link>
<nuxt-link:to="{name:'news-name',params:{name:1003}}">第3新闻</nuxt-link>

通过name确定组件名称：“xxx-yyy”
通过params给对应的参数传递值

默认路由

4.自定义布局

在layouts目录下创建组件：layouts/blog.vue
在需要的视图中使用blog布局

<script>
exportdefault{
layout:'blog'
//...
}
</script>

5.错误页面(编写layouts/error.vue页面，实现个性化错误页面)

<template>
<divclass="container">
<h1v-if="error.statusCode===404">页面不存在</h1>
<h1v-else>应用发生错误异常</h1>
<nuxt-linkto="/">首页</nuxt-link>
</div>
</template>
<script>
exportdefault{
props:['error'],
layout:'blog'//你可以为错误页面指定自定义的布局
}
</script>

Nuxt.js页面(页面组件实际上是Vue组件，只不过Nuxt.js为这些组件添加了一些特殊的配置项)

<template>
<h1class="red">Hello{{name}}!</h1>
</template>
<script>
exportdefault{
//异步处理数据,每次加载之前被调用
asyncData(context){
//calledeverytimebeforeloadingthecomponent
return{name:'World'}
},
//用于在渲染页面之前获取数据填充应用的状态树（store）
fetch(){
//Thefetchmethodisusedtofillthestorebeforerenderingthepage
},
//配置当前页面的Meta标签
head(){
//SetMetaTagsforthisPage
},
//andmorefunctionalitytodiscover
...
}
</script>
<style>
.red{
color:red;
}
</style>
<template>
<div>
详情页{{$route.params.id}}<br/>
<divclass="bg2"></div>
<divclass="bg3"></div>
</div>
</template>
<script>
exportdefault{
head:{
title:'详情页',
link:[
{rel:'stylesheet',href:'/style/img.css'}
],
script:[
{type:'text/javascript',src:'/js/news.js'}
]
}
}
</script>
<style>
.bg2{
background-image:url('~static/img/2.jpg');
width:300px;
height:300px;
background-size:300px;
}
</style>

6.nuxt整合vuex

在nuxt中只编写vuex的核心内容

编写内容 :

//state区域，相当于定义变量
export const state = () => ({
  
})

//mutations区域，用于修改数据
export const mutations = {
  方法名 (state,值) {
    
  }
}

state区域注意实现 :

//state 区域，相当于定义变量
export const state = ()=> {
  return {

  }
}
//省略写法
export const state = () => ({

})

案例: 1)创建 ~/store/index.js ，编写如下内容

//state 区域，相当于定义变量
export const state = () => ({
  pageInfo: ''
})

//mutations区域，用于修改数据
export const mutations = {
  setData( state , value) {
    state.pageInfo = value
  }
}

使用

<script>
import {mapState,mapMutation} from 'vuex'
export default {
    //state区域，与需要计算属性结合
    computed: {
        ...mapState([变量,变量2,....])
    },
    //mutations区域，进行修改数据，需要与methods结合
    methods: {
        ...mapMutation([方法名,方法名2,....])
    }, 
}
</script>

2) 完成fetch操作

<template>
  <div>
      {{ this.$store.state.pageInfo }}
  </div>
</template>

<script>
export default {
  async fetch( {$axios, store } ) {
    //发送ajax
    let { data } = await $axios.get('/userservice/user/list')
    console.info( data )
    //将查询结果保存vuex
    store.commit('setData', data.data )
  }
}
</script>

<style>

</style>

7.整合axios

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

1）package.json有axios的版本

2）nuxt.config.js以模块的方式添加axios

常见配置，修改nuxt.config.js进行baseURL的配置

使用axios发送ajax (在vue页面中，通过this.$axios.xxx()操作ajax。this.$axios与之前axios等效。)

this.$axios.post("/search-service/search",this.searchMap).then(res=>{
//获得查询结果
this.searchResult=res.data.data;
});

使用asyncData发送异步数据 (发送一个ajax 通过content.$axios来发送ajax请求，与之前使用axios等效。)

asyncasyncData(content){
let{data}=awaitcontent.$axios.get('/web-service/news',{
params:{
pageNum:1,
pageSize:8,
sortWay:'asc'
}
})
return{news:data.data}
},

发送多个ajax

asyncasyncData(content){
let[结果1,结果2]=awaitPromise.all([ajax请求1,ajax请求2])
return{
topNews:结果1的数据,
categorys:结果2的数据
}
},

asyncasyncData(content){
let[res,res2]=awaitPromise.all([
content.$axios.get("/web-service/news",{
params:{
pageNum:1,
pageSize:8,
sortWay:'asc'
}
}).then(res=>res),
content.$axios.get("/web-service/categorys")
.then(res=>res),
])
return{
topNews:res.data.data,
categorys:res2.data.data
}
},

使用fetch发送ajax

<template>
<div>
关于
</div>
</template>
<script>
//import{test}from'~/plugins/api.js'
import{mapState,mapMutations}from'vuex'
exportdefault{
asyncfetch({store,$axios}){
let{data}=await$axios.get('/web-service/news',{
params:{
pageNum:1,
pageSize:8,
sortWay:'asc'
}
})
store.commit('setData',data.data)
},
asyncmounted(){
let{data}=awaitthis.$axios.get('/web-service/news',{
params:{
pageNum:1,
pageSize:8,
sortWay:'asc'
}
})
localStorage.setItem('newssss',data.data.data)
}
}
</script>
<style>
</style>

8. 插件：自定义axios

步骤一：配置插件

步骤二：编写api.js对内置的$axios进行增强

//自定义函数
constrequest={
test:(params)=>{
returnaxios.get('/web-service/test',{
params
})
},
}
varaxios=null
exportdefault({$axios},inject)=>{
//3）保存内置的axios
axios=$axios
//4)将自定义函数交于nuxt
//使用方式1：在vue中，this.$request.xxx()
//使用方式2：在nuxt的asyncData中，content.app.$request.xxx()
inject('request',request)
}

9.Vuex状态树

store目录下的每个.js文件会被转换成为状态树指定命名的子模块。index是根模块

1). 根模块数据操作

步骤一：修改store/index.js添加一个counter变量，并可以继续累加操作

exportconststate=()=>({
counter:0
})
exportconstmutations={
increment(state){

state.counter++
}
}

步骤二：在页面中，使用

<template>
<div>
首页{{counter}}
<inputtype="button"value="+"@click="increment"/>
</div>
</template>
<script>
import{mapState,mapMutations}from'vuex'
exportdefault{
computed:{
...mapState(['counter'])
},
methods:{
...mapMutations(['increment'])
},
}
</script>
<style>
</style>

2). 其他模块数据操作

步骤一：创建其他模块

exportconststate=()=>({
money:0
})
exportconstmutations={
addmoney(state){
state.money+=5
}
}

步骤二：使用指定模块中的数据

<template>
<div>
首页{{money}}
<inputtype="button"value="+"@click="addmoney"/>
</div>
</template>
<script>
import{mapState,mapMutations}from'vuex'
exportdefault{
computed:{
money(){
returnthis.$store.state.book.money
}
},
methods:{
...mapMutations({
addmoney:'book/addmoney'
})
},
}
</script>
<style>
</style>

来源：oschina

链接：https://my.oschina.net/u/4234912/blog/3214441

标签

nuxt.js

vuex

Vue.js

ios

axios