Nuxt.js的API学习三

静态文件目录

静态文件目录static用于存放应用的静态文件，此类文件不会被Nuxt.js调用Webpack进行构建编译处理。服务器启动的时候，该目录下的文件会映射到应用的根路径/下。
举个例子：/static/robots.txt映射至/robots.txt
默认情况下Nuxt使用vue-loader、file-loader以及url-loader这几个Webpack加载器来处理文件的加载和引用。对于不需要通过Webpack处理的静态资源文件，可以放置在static目录中。
详情看资源目录

Store目录

store目录用于组织应用的Vue状态树文件。Nuxt.js框架集成了Vuex状态树的相关功能配置，在store目录下创建一个index.js文件可激活这些配置。
对于每个大项目来说，使用状态树管理状态十分有必要。这就是为什么Nuxt.js内核实现了Vuex。

使用状态树

Nuxt.js会尝试找到应用根目录下的store目录，如果该目录存在，它将做以下的事情：
1.引用vuex模块
2.将vuex模块加到vendors构建配置中去
3.设置vue跟实例的store配置项
Nuxt.js支持两种使用store的方式，你可以择一使用：

• 普通方式：store/index.js返回一个Vuex.Store实例
• 模块方式：store目录下的每个.js文件会被转换成为状态树指定命名的子模块(当然，index是根模块)

普通方式

Nuxt.js允许拥有一个store目录，其中包含与模块对应的每个文件。
首先，只需将状态导出为函数，将变量和操作作为store/index.js中的对象导出：

export const state = () => ({
    counter: 0
})
export const mutations = {
     addCounter (state, value) {
          state.counter = value
     }
}
export const actions = {
     changeCounter (context, value) {
          context.commit('addCounter', value)
     }
}

然后，可以在store文件夹下再创建一个文件todos.js文件：

export const state = () => ({
       list: []
})
export const mutations = {
       addList (state, value) {
             state.list = value
       }
}
export const actions = {
     changeList (context, value) {
         context.commit('changeList', value)
     }
}

下面是在pages文件夹下创建一个vue组件，使用store/index.js和store/todos.js模块：

<template>
  <ul>
    <li v-for="todo in todos">
      <input type="checkbox" :checked="todo.done" @change="toggle(todo)">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
    </li>
    <li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li>
  </ul>
</template>

<script>
export default {
  computed: {
    todos () {
      return this.$store.state.counter || this.$store.state.todos.list 
    }
  },
  methods: {
    addTodo (e) {
      this.$store.commit('addCounter', e.target.value)
      this.$store.commit('todos/addList', e.target.value)
      this.$store.dispatch('changeCounter', e.target.value)
      this.$store.dispatch('todos/changeList', e.target.value)
    }
  }
}
</script>

<style>
.done {
  text-decoration: line-through;
}
</style>

总结：1.vue-cli项目中取vuex中数据需要在组件中引入import {mapGetters} from 'vuex'。
computed: {
...mapGetters({
'user': 'global.user'
})
}
Nuxt.js直接调用this.store.state.变量名，二级状态树的state用：store.commit('变量名')，二级状态树的mutation用：store.dispatch('变量名')，二级状态树的action用：('文件名/变量名')。

参考文章：https://blog.csdn.net/github_38847071/article/details/78851209#commentBox

模块文件

可以将模块文件分解为单独的文件：state.js, action.js, mutations.js和getters.js。如果您使用index.js来维护state,getters,actions和mutations，同时具有单个单独的操作文件，那么仍然可以正确识别该文件。

注意：在使用拆分文件模块时，必须记住使用箭头函数功能， this 在词法上可用。词法范围this意味着它总是指向引用箭头函数的所有者。如果未包含箭头函数，那么this将是未定义的(undefined)。解决方案是使用 "normal" 功能，该功能会将this指向自己的作用域，因此可以使用。

nuxtServerlnit方法

如果在状态树中指定了nuxtServerInit方法，Nuxt.js调用它的时候会将页面的上下文对象作为第2个参数传给它(服务端调用时才会这样子)。当我们想将服务端的一些数据传到客户端时，这个方法是非常好用的。
举个例子，假设我们服务端的会话状态树里可以通过req.session.user来访问当前登录的用户。将该登录用户信息传给客户端的状态树，我们只需更新store/index.js如下：

actions: {
    nuxtServerInit ({commit}, {req}) {
         if (req.session.user) {
               commit('user', req.session.user)
         }
    }
}

如果你使用状态树模块化的模式，只有主模块(即store/index.js)适用设置该方法(其他模块设置了也不会被调用)。这时context被赋予nuxtServerInit作为第二个参数，它与asyncData或fetch方法相同。nuxtServerInit 方法接收的上下文对象和 fetch 的一样，但不包括 context.redirect() 和 context.error()。

注意：异步nuxtServerInit操作必须返回Promise来通知nuxt服务器等待它们。

actions: {
  async nuxtServerInit({ dispatch }) {
    await dispatch('core/load')
  }
}