Nuxt.js配合Koa搭建接口与使用Vuex

1.server文件路径下新建路由

const Router = require('koa-router')

const router = new Router({
  prefix: '/city'
})

router.get("/list", async (ctx) => {
  ctx.body = ['北京', '上海']
})

module.exports = router

2.server下index文件中引入路由

const cityInterface = require('./interface/city')

 app.use(cityInterface.routes()).use(cityInterface.allowedMethods())

3.在页面中显示（使用asyncData SSR）

 async asyncData() {
    let {
      status,
      data: { list }
    } = await axios.get("http://localhost:3000/city/list");
    return {
      list
    };

4.在Nuxt.js中使用Vuex

（1）在store目录中创建modules，并在modules中创建city.js

const state = () => ({
  list: ['a']
})

const mutations = {
  add(state, text) {
    state.list.push(text)
  }
}

const actions = {
  add: ({
    commit
  }, text) => {
    commit('add', text)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

（2）在store目录中创建index.js 并引入 city.js

import Vue from 'vue'
import Vuex from 'vuex'
import city from './modules/city'

Vue.use(Vuex)

const store = () => new Vuex.Store({
  modules: {
    city,
  },
  actions: {

  }
})

export default store

（3）在组件中使用 （一定要重启端口）

 <li v-for="(item,idx) in $store.state.city.list" :key="idx">{{item}}</li>