原理：Nuxt把store中的index.js文件中所有的state、mutations、actions、getters都作为其公共属性挂载到了store实例上，然而其他的文件则是使用的是命名空间，其对应的命名空间的名字就是其文件名。
computed: { ...mapState('plusBuy', { nickName: state => state.nickName }) } ...mapMutations('plusBuy', { setCityId: 'setCityId' // 将 `this.setCityId()` 映射为 `this.$store.commit('setCityId')` }) ...mapActions('plusBuy', { login: 'login' // 将 `this.login()` 映射为 `this.$store.dispatch('login')` })
9、asyncData不可以调用this，如果有好多个异步或数据进行处理，如何优化asyncData()
// 可以使用类 class A { aatest(aa){ console.log(aa) } } // 调用方法 async asyncData ({ query, store, req }) { var test = new A(); test.aatest(123); }
10、如何获取cookie
// 服务端获取cookie b_getToken(req = {},c_name){ if (req.headers && req.headers.cookie) { var req_Cookies = req.headers.cookie.split("; ") let tokens = '' req_Cookies.forEach(v => { if (v.indexOf(c_name + "=")>=0) { tokens = v } }) return tokens.split('=')[1] } else { return '' } } // 客户端获取cookie getCookie: function(c_name) { if (document.cookie.length > 0) { //先查询cookie是否为空，为空就return "" let c_start = document.cookie.indexOf(c_name + "=") || ''; //通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1 if (c_start != -1) { c_start = c_start + c_name.length + 1; //最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置 let c_end = document.cookie.indexOf(";", c_start); // 为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断 if (c_end == -1) { c_end = document.cookie.length; } return unescape(document.cookie.substring(c_start, c_end)); } } return ""; }, // 调用 let token = ''; if(process.server){ token = serverUtilsFn.b_getToken(req,'17uCNRefId'); console.log('server:' + token) }else { token = utilsFn.getCookie('17uCNRefId'); console.log('client:' + token) }
11、axios数据处理问题，重复问题
import axios from 'axios'; import requestCheck from './requestCheck'; // 确保使用 axios.create创建实例后再使用。否则多次刷新页面请求服务器，服务端渲染会重复添加拦截器，导致数据处理错误 const myaxios = axios.create() // axios.defaults.baseURL = "http://localhost:3000/" myaxios.interceptors.request.use(config => { let req = {...config }; req.url = req.method.toLocaleLowerCase() == 'post' ? requestCheck(req.url, req.data) : requestCheck(req.url, req.params); return req; }, error => { return Promise.reject(error) }) myaxios.interceptors.response.use(response => { return response }, error => { return Promise.reject(error) }) export default myaxios;
12、跳转路由传递参数并且取值
传递参数 -- this.$router.push({name: ' 路由的name ', params: {key: value}})
参数取值 -- this.$route.params.key
注: 使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数
注意: 由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。
13、设置页面动画效果
/* 全局过渡动效设置 - 淡出 (fade) 效果*/ .page-enter-active, .page-leave-active { transition: opacity .5s; } .page-enter, .page-leave-active { opacity: 0; } /* 局部过渡动效设置 - 淡出 (fade) 效果*/ .test-enter-active, .test-leave-active { transition: opacity .5s; } .test-enter, .test-leave-active { opacity: 0; } // 在要使用的组件页面中 export default { transition: 'test', }
14、如何使用插件
// 1. 安装插件 yarn add swiper -D // 2. 引入 <script> import Swiper from 'swiper' </script> // 3. 引入样式 <style lang="less" scoped> @import "../../node_modules/swiper/css/swiper.css"; </style>
15、如何在组件中使用异步数据