如何在chrisvfritz/vue-enterprise-boilerplate中正确使用Vuex？

嘿，我帮你梳理下在这个企业级Vue模板里用Vuex的正确姿势，顺便解决你遇到的_this.setTitle is not a function报错问题～

首先要明确：这个 boilerplate已经预先配置好了Vuex的基础架构，不需要你手动写new Vue来注入store——它已经在项目入口（src/main.js）里完成了全局注入，你只需要按照它的模块化规范来扩展和使用就行。

第一步：搭建课程相关的Vuex模块 #

这个项目的Vuex代码都集中在src/store目录下，推荐用模块化的方式管理状态。你可以这么做：

1. 在src/store/modules下新建courses.js文件，写入课程相关的状态、mutations、actions：

// src/store/modules/courses.js
const state = {
  // 示例：存储当前课程标题
  currentCourseTitle: ''
}

const mutations = {
  // 定义修改状态的方法，建议大写命名
  SET_TITLE(state, title) {
    state.currentCourseTitle = title
  }
}

const actions = {
  // 定义异步/同步的操作方法，这里就是你要调用的setTitle
  setTitle({ commit }, title) {
    commit('SET_TITLE', title)
  }
}

const getters = {
  // 定义获取状态的方法
  getCurrentCourseTitle: state => state.currentCourseTitle
}

export default {
  namespaced: true, // 开启命名空间，避免不同模块的方法/状态冲突
  state,
  mutations,
  actions,
  getters
}

2. 把这个模块注册到主store里，打开src/store/index.js，添加你的模块：

import Vuex from 'vuex'
import courses from './modules/courses'
// 这里可能还有其他已有的模块，比如app、user之类的，保留即可

export default new Vuex.Store({
  modules: {
    courses,
    // 其他已注册模块...
  }
})

第二步：在courses.vue组件中正确调用setTitle #

因为store已经全局注入，你可以通过两种方式调用Vuex的action：

方式一：用mapActions辅助函数（推荐，符合项目风格） #

这种方式会把Vuex的action映射成组件自己的方法，直接用this.setTitle()就能调用：

// courses.vue的<script>部分
import { mapActions } from 'vuex'

export default {
  name: 'Courses',
  methods: {
    // 把courses模块里的setTitle action映射到组件方法
    ...mapActions('courses', ['setTitle']),
    
    // 示例：在组件方法里调用
    updateCourseTitle() {
      this.setTitle('Vuex入门教程')
    }
  }
}

方式二：直接通过$store.dispatch调用 #

如果不想用辅助函数，也可以直接调用，注意要加上模块名（因为开了命名空间）：

export default {
  name: 'Courses',
  methods: {
    updateCourseTitle() {
      this.$store.dispatch('courses/setTitle', 'Vuex入门教程')
    }
  }
}

第三步：排查_this.setTitle is not a function报错的原因 #

你遇到的这个错误，大概率是以下几个问题导致的：

• 没有在store里正确注册courses模块，或者模块里的action名称拼写错误（比如写成setitle而不是setTitle）
• 用mapActions时没指定模块名（开了命名空间必须指定）
• 直接调用dispatch时模块名或action名写错了

额外：获取Vuex状态的方法 #

如果要获取存储的课程标题，可以用mapGetters辅助函数：

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('courses', ['getCurrentCourseTitle'])
  },
  mounted() {
    // 直接访问映射后的计算属性
    console.log('当前课程标题：', this.getCurrentCourseTitle)
  }
}

内容的提问来源于stack exchange，提问作者Hendrik Jan