Vue3 vuex "TypeError: vuex__WEBPACK_IMPORTED_MODULE_1__.Store.commit is not a function"

Question

所以，我试图通过 axios 获取静态 json 数据并将其提交到 vuex 中的“项目”状态，但我收到错误“Store.commit is not a函数”。

我是不是漏掉了什么？

请记住，我是在 Vue3 的 vuex 中这样做的。

//store.js
import axios from 'axios';
import { createStore, Store } from 'vuex'


export default createStore({
  state: {
    projects:[]
  },
  mutations: {
    SET_PROJECTS: (state, projects) => {
      state.projects = projects;
    }
  },
  actions: {
  },
  modules: {
  }
});

const getPrjectData = () => {

  axios
  .get('static json URL here')
  .then(response => {
    Store.commit('SET_PROJECTS', response.data.projects);
  })
  .catch(err => console.log(err));   
}

getPrjectData();

Answer 1

将函数转换为动作：

actions: {
  getPrjectData({ commit }) {
    axios
    .get('static json URL here')
    .then(response => {
      commit('SET_PROJECTS', response.data.projects);
    })
    .catch(err => console.log(err));   
  }
}

像这样调用操作：

选项API

this.$store.dispatch('getPrjectData');

作文API

import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore();
    store.dispatch('getPrjectData');
  }
}

Vue3 vuex "TypeError: vuex__WEBPACK_IMPORTED_MODULE_1__.Store.commit is not a function"

Vue3 vuex "TypeError: vuex__WEBPACK_IMPORTED_MODULE_1__.Store.commit is not a function"

javascript

vue.js

vuex

vuejs3

选项API

作文API