如何使用 vue-enterprise-boilerplate 在 Vue 中使用 Vuex

Question

我正在尝试在 chrisvfritz/vue-enterprise-boilerplate 中使用 Vuex。
但我不确定如何进行。

我的 <script> 部分 "courses.vue" 视图组件如下所示：

<script>
import Layout from '@layouts/main'
import { mapActions } from 'vuex'

export default {
  page: {
    title: 'Courses',
    meta: [{ name: 'description', content: 'Courses' }],
  },
  components: { Layout },
  mounted: () => {
    this.setTitle('courses')
    this.setIcon('about balance')
  },
  methods: {
    ...mapActions(['setTitle', 'setIcon']),
  },
}
</script>

其他关于如何使用 Vuex 的回答告诉我使用：

import store from '@state/store'

new Vue({
    store
});

但是 "courses.vue" 视图组件不是 "new Vue" 部分。

我得到的错误是：“_this.setTitle 不是函数”。

Answer 1

表示法：

new Vue({
    store
});

实际上是：

new Vue({
    store: store
});

因此，要获得相同的结果，只需将 store: store 添加到您的 export default { 对象。

不过，我必须说，您可能想将 store 添加到主 Vue 对象，而不是组件的对象。 注意： 据我所见 (https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/main.js)，代码已经添加了 store，因此您不必添加。

The error I am getting is: "_this.setTitle is not a function".

错误来自这里：

  mounted: () => {
    this.setTitle('courses')
    this.setIcon('about balance')
  },

在这种表示法中，在 mounted 函数内部，this 不会引用 Vue 实例，而是引用其他对象（可能是 window）。这是我建议的符号：

  mounted() {
    this.setTitle('courses')
    this.setIcon('about balance')
  },

除此之外，您还可以 mounted: function() {，但我认为上面的符号更清晰（我不使用它的唯一原因是浏览器支持，但由于您使用的是 ()=>{}, 我假设您的目标是较新的浏览器）。

如何使用 vue-enterprise-boilerplate 在 Vue 中使用 Vuex

How to use Vuex in Vue using vue-enterprise-boilerplate

vue.js

vue-component

vuex