Nuxt+Vuetify使用store时报Object(...) is not a function错误

TypeError: Object(...) is not a function是因为你导入createStore的来源完全错误：

• vuetify是UI组件库，本身不提供状态管理相关能力，也不会导出createStore方法，你从该包解构得到的createStore值为undefined，将undefined作为函数调用就会触发这个报错。
• 除此之外你的代码还有3处会导致后续运行异常的问题：
  • 拼写错误：Vuex中定义修改状态方法的配置项为mutations（复数），你写的是单数mutation，后续调用commit会找不到对应方法
  • state写法不规范：直接写对象形式在多实例场景下会出现状态污染，应该用函数返回状态对象
  • action参数写法错误：action的第一个参数是store上下文对象（包含commit、state、dispatch等属性），调用action时传入的载荷是第二个参数，你把业务参数userInfos写在第一个解构对象里永远拿不到传入的值

第一步：纠正依赖导入 #

createStore是状态管理库的方法，和Vuetify无关：

• 如果你用Nuxt2 + Vuex技术栈，从vuex包导入
• 如果你用Nuxt3，官方默认推荐使用Pinia作为状态管理方案，不需要手动调用createStore初始化

第二步：修正代码写法 #

Nuxt2 + Vuex 场景正确代码 #

// 从vuex导入createStore，删除从vuetify导入的错误写法
import { createStore } from 'vuex'

const store = createStore({
  // state改为函数返回对象
  state: () => ({}),
  // 修正为复数mutations
  mutations: {
    SET_USER(state, userInfos) {
      // 在这里修改state
      state.user = userInfos
    }
  },
  actions: {
    // 第一个参数是上下文，第二个才是传入的业务参数
    createAccount({ commit }, userInfos) {
      console.log(userInfos)
      commit('SET_USER', userInfos)
    }
  }
})

export default store

Nuxt3 + Pinia 场景正确写法 #

Nuxt3会自动注册stores目录下的store，不需要手动创建实例挂载：

// stores/account.js
import { defineStore } from 'pinia'

export const useAccountStore = defineStore('account', {
  state: () => ({}),
  actions: {
    createAccount(userInfos) {
      console.log(userInfos)
    }
  }
})

• 导入第三方方法后可以先打印值确认，如果打印结果为undefined，优先检查导入路径、导入来源是否正确
• 框架/库的配置项注意单复数拼写，这类拼写错误不会有很明确的提示，很容易踩坑
• 状态管理中action的参数格式是固定的，不要把业务传入的参数写到上下文解构里

内容的提问来源于stack exchange，提问作者Thibault PERONNO