Nuxt - Nuxt入门

版权声明：写文章辛苦，请不要复制粘贴，如果要，请注明来处 https://blog.csdn.net/u012627861/article/details/87888697

Nuxt搭建

通过脚手架可以很方便的搭建，具体信息参考《安装 - Nuxt.js》
安装时会要求选择Web服务器，我这里选择的是express。插件选择时推荐勾选上prettier、lint，其他的自行处理。有空在做详细说明。

Nuxt整合Vuex

在store目录下创建index.js如下

export const state = () => ({})
export const mutations = {}
export const actions = {}
export const getters = {}

这样将自动激活Vuex，激活后，store目录下所有的js文件，都会被导入至state、mutations、actions、getters，前提是js满足以下条件：

1. 要么js文件名称为state.js、mutations.js、actions.js或getters.js
2. 要么js文件通过export const state、export const mutations、export const actions、export const getters语句来导出这些对象和方法

关于模块定义
比如我们拥有订单模块，业务比较复杂，那我们可以创建order目录，在目录下创建state.js、mutations.js、actions.js和getters.js（需要什么就创建什么），这样可以通过this.$store.state.order来访问state，通过order/mutationName，order/actionName来调用mutations和actions。getter暂时没调用过！如果一个页面业务不复杂，比如用户模块，那么我们就可以直接创建user.js，通过export导出state, mutations, actions, getters即可，如下

store
  - order
    - state.js
    - mutations.js
    - actions.js
    - getters.js
 index.js
 user.js

user.js如下

export const state = () => ({})
export const mutations = {}
export const actions = {}
export const getters = {}