Question

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

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

<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”视图组件不是“新的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，这是您不必要的。

我得到的错误是：＆＃34; _this.setTitle不是函数＆＃34;。

错误来自：

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

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

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

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

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

1 个答案: