使用vuex存储的未知操作类型错误

Question

我正在尝试分派动作，但出现此错误：“未知动作类型”。

我知道为什么会有这个错误，但是我不知道我做错了什么。

我的组件：

created() {
    this.$store.dispatch('techValid/fetchTechValids');
  },

我的商店（index.js）：

import Vue from 'vue';
import Vuex from 'vuex';
import techValid from './modules/techValid';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {   techValid,
  },
});

我的商店（techValid.js是商店中的ina模块文件夹）：

actions: {
    async fetchTechValids() {
      await axios
        .get('http://localhost:3080/techValid')
        .then((response) => {
          console.log('API CALL OK');
          console.log(response);
          techValid.commit('SET_ALL_TECHVALIDS', response);
        })
        .catch((error) => {
          console.log('API CALL NOT OK', error);
          throw new Error(`${error}`);
        });
    },
  },

Main.js：

//Some imports

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>',
});

Answer 1

[techValid.js应该使用namespaced:true属性声明如下：

export default techValid{
namespaced:true,
...
actions:{
fetchTechValids() {
       axios
        .get('http://localhost:3080/techValid')
        .then((response) => {
          console.log('API CALL OK');
          console.log(response);
          techValid.commit('SET_ALL_TECHVALIDS', response);
        })
        .catch((error) => {
          console.log('API CALL NOT OK', error);
          throw new Error(`${error}`);
        });
    },
}

}

不需要async/await，因为您要在然后的回调中更改状态

const api =
  'https://jsonplaceholder.typicode.com/users'

const UPDATE_USERS = 'UPDATE_USERS'
const SET_LOADING = 'SET_LOADING'

const store = new Vuex.Store({
  modules: {
    user: {
      namespaced: true,
      state: {
        users: {},
        loading: false
      },
      mutations: {
        [UPDATE_USERS](state, users) {
      
          state.users = users;
         
        },
        [SET_LOADING](state, loading) {
          state.loading = loading;
        }
      },
      getters: {
        users(state) {
          return state.users
        }
      },
      actions: {
        getUsers({
          commit
        }) {
          commit(SET_LOADING, true);
          return fetchJsonp(api)
            .then((users) => users.json())
            .then((usersParsed) => {
              commit(UPDATE_USERS, usersParsed)
              commit(SET_LOADING, false)
            })
        }
      }


    }

  }
})

const mapState = Vuex.mapState;

const Users = {
  template: '<div><ul><li v-for="user in users">{{user.name}}</li></ul></div>',
  computed: mapState({  users: state => state.user.users})
}

new Vue({
  el: '#app',
  store: store,
  computed: {
    ...mapState({
      loading: state => state.user.loading,
      users: state => state.user.users
    }),


  },
  created() {
    this.$store.dispatch('user/getUsers')
  },
  components: {
    Users
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.0.5/fetch-jsonp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.min.js"></script>
<div id="app">
  <div v-if="loading">loading...</div>
  <users></users>
  <pre v-if="!loading">{{users}}</pre>
</div>