├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── assets └── README.md ├── components ├── Logo.vue └── README.md ├── layouts ├── README.md └── default.vue ├── middleware └── README.md ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── README.md ├── demo │ ├── data.vue │ ├── ele-ui.vue │ ├── head.vue │ ├── index.vue │ ├── sass.vue │ ├── store.vue │ └── users │ │ └── _id.vue └── index.vue ├── plugins ├── README.md └── element-ui.js ├── static ├── README.md └── favicon.ico └── store ├── README.md └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: [ 11 | 'plugin:vue/recommended' 12 | ], 13 | // required to lint *.vue files 14 | plugins: [ 15 | 'vue' 16 | ], 17 | // add your custom rules here 18 | rules: { 19 | // 取消强制执行每行的最大属性数 20 | 'vue/max-attributes-per-line': 0, 21 | // 允许空标签 22 | 'vue/html-self-closing': 0, 23 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 24 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 25 | // 禁止弹窗 26 | 'no-alert': 2, 27 | // 箭头函数必须有空格 28 | 'arrow-spacing': 'error', 29 | // 函数定义时括号前面必须有空格 30 | 'space-before-function-paren': [ 31 | 'error', 32 | 'always' 33 | ], 34 | // 禁止使用var 35 | 'no-var': 2, 36 | // 使用单引号 37 | 'quotes': [ 38 | 'error', 39 | 'single' 40 | ], 41 | // 代码末尾不加分号 42 | 'semi': [ 43 | 'error', 44 | 'never' 45 | ] 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE 81 | .idea 82 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Vue Server-Side Rendering(SSR) 3 | 官网地址：https://ssr.vuejs.org/ 4 | # 什么是SSR？ 5 | 在服务端获取数据进行解析渲染，生成html代码返回给前端 6 | 7 | # 为什么要使用SSR? 8 | 1. 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面 9 | 2. 更利于首屏渲染 10 | 11 | # SSR的局限 12 | 1. 服务端压力较大 13 | 2. 开发条件受限 14 | 3. 学习成本相对较高 15 | 16 | # Vue SSR 的几种实现方式 17 | 1. Node.js server (Webpack + Node) 18 | 2. 预渲染 (prerender-spa-plugin) 19 | 3. Nuxt.js 20 | 21 | # 为什么选择Nuxt.js 22 | - 基于 Vue.js 23 | - 自动代码分层 24 | - 服务端渲染 25 | - 强大的路由功能，支持异步数据 26 | - 静态文件服务 27 | - ES6/ES7 语法支持 28 | - 打包和压缩 JS 和 CSS 29 | - HTML头部标签管理 30 | - 本地开发支持热加载 31 | - 集成ESLint 32 | - 支持各种样式预处理器： SASS、LESS、 Stylus等等 33 | - 支持HTTP/2 推送 34 | 35 | # vue-nuxt2-app 36 | 37 | > vue nuxt2 demo 38 | 39 | 40 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org). 41 | 42 | ## 搭建指南 43 | ``` bash 44 | # 使用脚手架 45 | $ npx create-nuxt-app <项目名> 46 | # 集成选择(Element UI + axios + ESLint) 47 | 1. 在集成的服务器端框架之间进行选择: 48 | - [x] None (Nuxt默认服务器) 49 | - [ ] Express 50 | - [ ] Koa 51 | - [ ] Hapi 52 | - [ ] Feathers 53 | - [ ] Micro 54 | - [ ] Adonis (WIP) 55 | 2. 选择您喜欢的UI框架: 56 | - [ ] None (无) 57 | - [ ] Bootstrap 58 | - [ ] Vuetify 59 | - [ ] Bulma 60 | - [ ] Tailwind 61 | - [x] Element UI 62 | - [ ] Buefy 63 | 3. 选择你想要的Nuxt模式 (Universal or SPA) 64 | - [x] Universal 65 | - [ ] Single Page App 66 | 4. 添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。 67 | - [ ] no 68 | - [x] yes 69 | 5. 添加 EsLint 以在保存时代码规范和错误检查您的代码。 70 | - [ ] no 71 | - [x] yes 72 | 6. 添加 Prettier 以在保存时格式化/美化您的代码。 73 | - [x] no 74 | - [ ] yes 75 | ``` 76 | ## 配置ESLint规则 77 | 修改```.eslintrc.js```文件```rules```属性 78 | ``` 79 | // 取消强制执行每行的最大属性数 80 | "vue/max-attributes-per-line": 0, 81 | // 允许空标签 82 | 'vue/html-self-closing': 0, 83 | // 禁止弹窗 84 | 'no-alert': 2, 85 | // 箭头函数必须有空格 86 | 'arrow-spacing': 'error', 87 | // 函数定义时括号前面必须有空格 88 | 'space-before-function-paren': [ 89 | 'error', 90 | 'always' 91 | ], 92 | // 禁止使用var 93 | 'no-var': 2, 94 | // 使用单引号 95 | 'quotes': [ 96 | 'error', 97 | 'single' 98 | ], 99 | // 代码末尾不加分号 100 | 'semi': [ 101 | 'error', 102 | 'never' 103 | ] 104 | ``` 105 | ## 配置Sass 106 | ``` 107 | npm i sass node-sass sass-loader -D --registry=https://registry.npm.taobao.org 108 | ``` 109 | 示例参考demo/sass 110 | 111 | ## 使用axios 112 | API地址:https://axios.nuxtjs.org/ 113 | > 配置Proxy 114 | 115 | 修改nuxt.config.js，追加proxy属性 116 | ``` 117 | proxy: { 118 | '/api/': { 119 | target: 'http://dev.nuxtdemo.com:3001', // api主机 120 | pathRewrite: { '^/api': '' } 121 | } 122 | } 123 | ``` 124 | 修改axios属性 125 | ``` 126 | /* 127 | ** Axios module configuration 128 | */ 129 | axios: { 130 | // See https://github.com/nuxt-community/axios-module#options 131 | prefix: process.env.NODE_ENV === 'production' ? '/' : '/api/', 132 | proxy: true 133 | }, 134 | ``` 135 | > axios示例 136 | ``` 137 | // 你可能想要在服务器端获取并渲染数据。Nuxt.js添加了asyncData方法使得你能够在渲染组件之前异步获取数据。 138 | async asyncData (app) { 139 | let { data } = await app.$axios.get('/api/v1/users').then(res => { 140 | return res 141 | }) 142 | console.table(data) 143 | return { 144 | users: data 145 | } 146 | } 147 | ``` 148 | 示例参考/demo/data 149 | ## 使用plugins 150 | 插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。 151 | 152 | 示例参考/demo/ele-ui 153 | ## HTML 头部 154 | Nuxt.js 使用了 vue-meta 更新应用的 头部标签(Head) and html 属性。 155 | 个性化特定页面的 Meta 标签 156 | ``` 157 | head () { 158 | return { 159 | title: '优购时尚商城-时尚服饰鞋包网购首选-优生活，购时尚！', 160 | meta: [ 161 | { hid: 'keywords', name: 'keywords', content: '优购网,优购时尚商城,优购网上鞋城' }, 162 | { hid: 'description', name: 'description', content: '优购网-时尚服饰鞋包网购首选,经营耐克、阿迪达斯、Kappa、匡威、百丽、他她、天美意、森达等众多知名品牌,100%专柜正品,免费送货,10天退换货,提供愉悦购物体验!' } 163 | ] 164 | } 165 | } 166 | ``` 167 | 示例参考/demo/head 168 | ## 使用Vuex 169 | Nuxt.js 内置引用了 vuex 模块，所以不需要额外安装。 170 | 171 | Nuxt.js 支持两种使用 store 的方式，你可以择一使用： 172 | 173 | 1. 普通方式： store/index.js 返回一个 Vuex.Store 实例 174 | 2. 模块方式： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 （当然，index 是根模块） 175 | 176 | 在store目录下新建根模块 index.js 177 | ``` 178 | export const state = () => { 179 | list: [] 180 | } 181 | 182 | export const getter = () => { 183 | getList: state => state.list 184 | } 185 | 186 | export const mutations = { 187 | SET_LIST (state, data) { 188 | state.list = data 189 | } 190 | } 191 | 192 | export const actions = { 193 | async getList ({ commit }) { 194 | return this.$axios.get('/api/v1/users').then(res => { 195 | return commit('SET_LIST', res.data) 196 | }) 197 | } 198 | } 199 | 200 | ``` 201 | 引用根模块 202 | ``` 203 | import { mapState } from 'vuex' 204 | export default { 205 | fetch ({store, params}) { 206 | return store.dispatch('getList') 207 | }, 208 | computed: { 209 | ...mapState({ 210 | list: state => state.list 211 | }) 212 | } 213 | } 214 | ``` 215 | 示例参考/demo/store 216 | ## 动态路由 217 | 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录 218 | 219 | 示例参考/demo/data 220 | 221 | 注意：在 Nuxt.js 执行 generate 命令时，动态路由 会被忽略。 222 | 223 | 上面的目录结构，Nuxt.js 只会生成路由 / 对应的静态文件。（因为 /users/:id 是动态路由） 如果想让 Nuxt.js 为动态路由也生成静态文件，你需要指定动态路由参数的值，并配置到 routes 数组中去。 224 | 225 | 例如，我们可以在 nuxt.config.js 中为 /users/:id 路由配置如下： 226 | ``` 227 | generate: { 228 | routes: [ 229 | '/demo/users/003', 230 | '/demo/users/004', 231 | '/demo/users/005' 232 | ] 233 | } 234 | ``` 235 | 但是如果路由动态参数的值是动态的而不是固定的，应该怎么做呢？ 236 | ``` 237 | const axios = require('axios') 238 | 239 | module.exports = { 240 | generate: { 241 | routes: function (callback) { 242 | return axios.get('http://dev.nuxtdemo.com:3001/api/v1/users') 243 | .then((res) => { 244 | var routes = res.data.map((user) => { 245 | return '/demo/users/' + user.id 246 | }) 247 | callback(null, routes) 248 | }) 249 | } 250 | } 251 | } 252 | ``` 253 | > 如果有多个接口,动态路由该怎么做呢？ 254 | ## Build Setup 255 | 256 | ``` bash 257 | # install dependencies 258 | $ npm install 259 | 260 | # serve with hot reload at localhost:3000 261 | $ npm run dev 262 | 263 | ``` 264 | 部署 265 | > 服务端渲染应用部署 266 | 267 | ```npm run build``` 生成.nuxt文件 268 | 269 | ```npm run start``` 270 | 271 | > 静态应用部署 272 | 273 | ```npm run generate``` 生成dist文件 274 | 275 | 注意两种部署方式```axios.prefix```的修改 276 | 277 | > How to deploy on Netlify? 278 | 279 | Press the "New site from Git" button on the Netlify dashboard. 280 | 281 | Authenticate with your repository host, select a repository to deploy, and continue. 282 | 283 | You should land on step 3: "Build options, and deploy!" 284 | 285 | Configure: 286 | 1. Branch to deploy: master, or which-ever branch you prefer 287 | 2. Build command: npm run generate 288 | 3. Publish directory: dist 289 | 290 | ## 扩展 React Next.js 291 | 官网：https://nextjs.org/ 292 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /components/Logo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 80 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 56 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | const pkg = require('./package') 2 | const axios = require('axios') 3 | 4 | module.exports = { 5 | mode: 'universal', 6 | 7 | /* 8 | ** Headers of the page 9 | */ 10 | head: { 11 | title: pkg.name, 12 | meta: [ 13 | { charset: 'utf-8' }, 14 | { 15 | name: 'viewport', 16 | content: 'width=device-width, initial-scale=1' 17 | }, 18 | { 19 | hid: 'description', 20 | name: 'description', 21 | content: pkg.description 22 | } 23 | ], 24 | link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] 25 | }, 26 | 27 | /* 28 | ** Customize the progress-bar color 29 | */ 30 | loading: { color: '#fff' }, 31 | 32 | /* 33 | ** Global CSS 34 | */ 35 | css: ['element-ui/lib/theme-chalk/index.css'], 36 | 37 | /* 38 | ** Plugins to load before mounting the App 39 | */ 40 | plugins: ['@/plugins/element-ui'], 41 | 42 | /* 43 | ** Nuxt.js modules 44 | */ 45 | modules: [ 46 | // Doc: https://github.com/nuxt-community/axios-module#usage 47 | '@nuxtjs/axios' 48 | ], 49 | /* 50 | ** Axios module configuration 51 | */ 52 | axios: { 53 | // See https://github.com/nuxt-community/axios-module#options 54 | 55 | // 静态应用部署(npm run generate) 若不跨域需要设置baseURL 56 | // baseURL: process.env.NODE_ENV === 'production' ? 'http://dev.nuxtdemo.com:3001/' : '', 57 | 58 | // 静态应用部署(npm run generate) 若跨域设置prefix,可配合nginx反向代理 59 | // prefix: '/apis/', 60 | 61 | // npm run dev,服务端渲染应用部署(npm run start) 跨域设置 62 | prefix: '/api/', 63 | proxy: true 64 | }, 65 | 66 | /* 67 | ** Build configuration 68 | */ 69 | build: { 70 | /* 71 | ** You can extend webpack config here 72 | */ 73 | extend (config, ctx) { 74 | // Run ESLint on save 75 | if (ctx.isDev && ctx.isClient) { 76 | config.module.rules.push({ 77 | enforce: 'pre', 78 | test: /\.(js|vue)$/, 79 | loader: 'eslint-loader', 80 | exclude: /(node_modules)/ 81 | }) 82 | } 83 | } 84 | }, 85 | proxy: { 86 | '/api/': { 87 | target: 'http://dev.nuxtdemo.com:3001', // api主机 88 | pathRewrite: { '^/api': '' } 89 | } 90 | }, 91 | generate: { 92 | // routes: [ 93 | // '/demo/users/003', 94 | // '/demo/users/004', 95 | // '/demo/users/005' 96 | // ] 97 | routes: function (callback) { 98 | return axios.get('http://dev.nuxtdemo.com:3001/api/v1/users') 99 | .then((res) => { 100 | var routes = res.data.map((user) => { 101 | return '/demo/users/' + user.id 102 | }) 103 | callback(null, routes) 104 | }) 105 | } 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-nuxt2-app", 3 | "version": "1.0.0", 4 | "description": "vue nuxt2 demo", 5 | "author": "tang.zw", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 13 | "lint--fix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .", 14 | "precommit": "npm run lint" 15 | }, 16 | "dependencies": { 17 | "cross-env": "^5.2.0", 18 | "nuxt": "^2.0.0", 19 | "element-ui": "^2.4.6", 20 | "@nuxtjs/axios": "^5.0.0" 21 | }, 22 | "devDependencies": { 23 | "babel-eslint": "^8.2.1", 24 | "eslint": "^5.0.1", 25 | "eslint-loader": "^2.0.0", 26 | "eslint-plugin-vue": "^4.0.0", 27 | "node-sass": "^4.9.3", 28 | "nodemon": "^1.11.0", 29 | "sass": "^1.14.1", 30 | "sass-loader": "^7.1.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and create the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /pages/demo/data.vue: -------------------------------------------------------------------------------- 1 | 10 | 24 | -------------------------------------------------------------------------------- /pages/demo/ele-ui.vue: -------------------------------------------------------------------------------- 1 | 33 | 45 | 48 | -------------------------------------------------------------------------------- /pages/demo/head.vue: -------------------------------------------------------------------------------- 1 | 6 | 19 | 22 | -------------------------------------------------------------------------------- /pages/demo/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 16 | 19 | -------------------------------------------------------------------------------- /pages/demo/sass.vue: -------------------------------------------------------------------------------- 1 | 6 | 11 | 25 | -------------------------------------------------------------------------------- /pages/demo/store.vue: -------------------------------------------------------------------------------- 1 | 8 | 21 | 24 | 25 | -------------------------------------------------------------------------------- /pages/demo/users/_id.vue: -------------------------------------------------------------------------------- 1 | 6 | 16 | 19 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 34 | 35 | 67 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /plugins/element-ui.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Element from 'element-ui/lib/element-ui.common' 3 | import locale from 'element-ui/lib/locale/lang/en' 4 | 5 | export default () => { 6 | Vue.use(Element, { locale }) 7 | } 8 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | 8 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 11 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/heystar/vue-nuxt2-demo/20404c208ba6eb124d0b09bd64f95d073a0a10a1/static/favicon.ico -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory activate the option in the framework automatically. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | export const state = () => { 2 | list: [] 3 | } 4 | 5 | export const getter = () => { 6 | getList: state => state.list 7 | } 8 | 9 | export const mutations = { 10 | SET_LIST (state, data) { 11 | state.list = data 12 | } 13 | } 14 | 15 | export const actions = { 16 | async getList ({ commit }) { 17 | return this.$axios.get('/api/v1/users').then(res => { 18 | return commit('SET_LIST', res.data) 19 | }) 20 | } 21 | } 22 | --------------------------------------------------------------------------------