在 Nuxt 中使用 Vuex

Question

我能够使用 Nuxt 的 Fetch API 获取数据并显示它们，但我想改用 Vuex。

商店/ index.js：

import Axios from 'axios'

export const getters = {
  isAuthenticated (state) {
    return state.auth.loggedIn
  },

  loggedInUser (state) {
    return state.auth.user
  }
}
export const state = () => ({
  videos: []
})

export const mutations = {
  storeVideos (state, videos) {
    state.videos = videos
  }
}

export const actions = {
  async getVideos (commit) {
    const res = await Axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${process.env.API_SECRET}&page=${this.currentPage}`)
    commit('storeVideos', res.data)
  }
}

页面/test.vue：

    <template>
          <Moviecards
            v-for="(movie, index) in $store.state.videos"
            :key="index"
            :movie="movie"
            :data-index="index"
          />
    </template>
    
    <script>
...
      fetch ({ store }) {
        store.commit('storeVideos')
      },
      data () {
        return {
          prevpage: null,
          nextpage: null,
          currentPage: 1,
          pageNumbers: [],
          totalPages: 0,
          popularmovies: []
        }
      },
      watch: {
    
      },
      methods: {
        next () {
          this.currentPage += 1
        }
      }
    }
...

当我检查 Vue Dev Tools 时，数组返回空。

Answer 1

在fetch() ，您提交storeVideos没有参数，这会将store.state.videos设置为undefined ，但我认为您打算调度getVideos操作：

export default {
  fetch({ store }) {
    // BEFORE:
    store.commit('storeVideos')

    // AFTER:
    store.dispatch('getVideos')
  }
}

此外，您的操作错误地使用了其参数。 第一个参数是 Vuex 上下文，您可以从中解构commit ：

export const actions = {
  // BEFORE:
  async getVideos (commit) {}  // FIXME: 1st arg is context

  // AFTER:
  async getVideos ({ commit }) {}
}