【nuxt.js笔记】nuxt.js中使用Vuex

Nuxt.js 内置引用了 vuex 模块，所以不需要额外安装。

Nuxt.js 会找到应用根目录下的 store 目录，如果该目录存在，它将做以下的事情：

1. 引用 vuex 模块
2. 将 vuex 模块 加到 vendors 构建配置中去
3. 设置 Vue 根实例的 store 配置项

Nuxt.js 支持两种使用 store 的方式，你可以择一使用：

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

模块方式

状态树还可以拆分成为模块，store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块

使用状态树模块化的方式，store/index.js 不需要返回 Vuex.Store 实例，而应该直接将 state、mutations 和 actions 暴露出来：

index.js

export const state = () => ({
    articleTitle: [],
    labelList: []
})

export const mutations = {

    // 设置热门文章标题
    updateArticleTitle(state, action) {
        state.articleTitle = action
    },

    // 设置标签列表数据
    updateLabel(state, action){
        state.labelList = action
    }

}

export const actions = {

    // 获取热门文章标题
    fetchArticleTitle({ commit }) {
        return this.$axios
            .$get('http://localhost:3000/article/title')
            .then(response => {
                commit('updateArticleTitle', response.data)
            })
    },

    // 获取标签
    fetchLabel({ commit }) {
        return this.$axios
            .$get('http://localhost:3000/label/list')
            .then(response => {
                commit('updateLabel', response.data)
            })
    },

}

index.vue
fetch方法中触发异步提交状态事件

<script>
import ArticleList from '~/components/archive/list'
import Banner from '~/components/archive/banner'


export default {
  components: {
    ArticleList,
    Banner,
  },
  async asyncData({ app }){
    //获取文章列表数据
    let article = await app.$axios.get(`http://localhost:3000/article/list?pageNum=1&pageSize=5`)
    return {articleList: article.data.data}
  },
  async fetch({ store }) {
      return Promise.all([
          store.dispatch('common/fetchArticleTitle'),
          store.dispatch('common/fetchLabel')
      ])
  },
  computed: {

  },
  methods: {

  }
}
</script>

对应组件中通过computed 方法获取状态数据

computed: {
      labelList(){
        return this.$store.state.common.labelList
      }
    },