如何正确使用store in vue/nuxt？

Question

我在使用 vue/vuex 和 nuxt.js 时遇到了一些错误。我认为这只是一个命名问题，但我不明白为什么：

// ./store/dates.js

import * as types from './types'

const actions = {
  [types.DATES_FILTER_START]: ({ commit }, opts) => {
    debugger
    commit(types.DATES_FILTER_START, opts.filterStartDate)
  },

  [types.DATES_FILTER_END]: ({ commit }, opts) =>
    commit(types.DATES_FILTER_END, opts.filterEndDate),
}

const mutations = {
  [types.DATES_FILTER_START]: (state, filterStartDate) => {
    debugger
    state.filterStartDate = filterStartDate
  },
  [types.DATES_FILTER_END]: (state, filterEndDate) => {
    debugger
    state.filterEndDate = filterEndDate
  },
}

const getters = {
  [types.DATES_FILTER_START]: (state) => state.filterStartDate,
  [types.DATES_FILTER_END]: (state) => state.filterStartEnd,
}

export const state = () => ({
  filterStartDate: '',
  filterEndDate: '',
})

export default {
  state,
  getters,
  mutations,
  actions,
}

// store/types.js

export const DATES_FILTER_START = 'dates/FILTER_START'
export const DATES_FILTER_END = 'dates/FILTER_END'

我收到以下错误：

[vuex] unknown getter: dates/FILTER_END vuex.esm.js:1023
[vuex] unknown getter: dates/FILTER_START vuex.esm.js:1023
[vuex] unknown getter: dates/FILTER_END
...
[vuex] unknown action type: dates/FILTER_START

以下是我尝试使用商店的方式：

<template>
  <div>
    <h4>Date Range</h4>
    <div class="grid date-range control">
      <div class="span-6">
        <label for="start-date">Start date</label>
        <input
          id="start-date"
          type="date"
          :min="minDatePickerDate"
          :value="filterStartDate"
          @change="setFilterStartDate"
        />
      </div>

      <div class="span-6">
        <label for="end-date">End date</label>
        <input
          id="end-date"
          type="date"
          :min="filterStartDate"
          :value="filterEndDate"
          @change="setFilterEndDate"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import * as types from '../../store/types'

export default {
  data() {
    return {
      minDatePickerDate: '2015-01-01',
    }
  },
  computed: {
    ...mapGetters({
      filterStartDate: types.DATES_FILTER_START,
      filterEndDate: types.DATES_FILTER_END,
    }),
  },
  methods: {
    ...mapActions({
      setFilterStartDate: types.DATES_FILTER_START,
      setFilterEndDate: types.DATES_FILTER_END,
    }),
    // ...mapMutations({
    //   setFilterStartDate: types.DATES_FILTER_START,
    //   setFilterEndDate: types.DATES_FILTER_END,
    // }),
  },
}
</script>

我添加了一个空的 ./store/index.js，就像文档所说的那样

Answer 1

不需要空 store/index.js。

store目录中的每个js文件都是automatically transformed into a namespaced module, so store/dates.js creates a module named "dates". store/types.js is not intended to be a module, so its filename should be prefixed with the ignorePrefix pattern（默认为-）：

store/types.js  // ❌ creates a module

store/-types.js // ✅ ignored

由于 dates 是命名空间模块，您的 mapGetters、mapActions 和 mapMutations 调用必须包含命名空间 ("dates") 作为第一个参数：

import { mapGetters, mapActions } from 'vuex'
import * as types from '~/store/-types'

export default {
  computed: {        
    ...mapGetters('dates', {
      filterStartDate: types.DATES_FILTER_START,
      filterEndDate: types.DATES_FILTER_END,
    }),
  },
  methods: {         
    ...mapActions('dates', {
      setFilterStartDate: types.DATES_FILTER_START,
      setFilterEndDate: types.DATES_FILTER_END,
    }),                
    ...mapMutations('dates', {
      setFilterStartDate: types.DATES_FILTER_START,
      setFilterEndDate: types.DATES_FILTER_END,
    }),
  },
}

demo 1

或者，您可以通过导出 namespaced=false:

来禁用 store/dates 的命名空间

// store/dates.js
export default {
  namespaced: false,
  //...
}

demo 2

您应该知道您的组件在结束日期方面存在数据绑定问题，但这超出了原始问题的范围。

如何正确使用store in vue/nuxt？

How to properly use store in vue/nuxt?

vue.js

vuex

nuxt.js