Vuex中执行完mutations，更新了state后，视图不更新

Question

先说需求：
很简单，就是一个 ProductList.vue 组件显示商品信息列表

遇到的问题：
在使用 Vuex 对其状态管理时，更改了 state 中的 products 值之后，视图不更新。

我的代码如下

1. 先看 store.js

   const state = {
       products: []
   }
   const mutations = {
   // 获取全部商品
       getProductList (state, {_products}) {
           state.products = _products
       // 这里能成功的执行，更新products的值
       }
   }

2. 然后，我在 ProductList.vue 中是这样写的

   <template>{{products}}</template>// 这里简写，意思是使用products的值
   <script>
   export default {
       created () {
           this.$store.dispatch('getProductList')
       },
       computed: {
           products () {
                // 这里获取store中的products的值
                return this.$store.state.products
           }
       }
   }
   </script>

   这里代码简化了很多。

程序运行的结果是： template 中的 products 的值为 []

然后，我在 store.js 中使用了 getters 对象，代码这样写：

    const getters = {
        allProduct: state => state.products
    }

相应的改变 ProductList.vue 中 computed，代码如下：

    ...
    import {mapGetters} from 'vuex'
    computed: {
        ...mapGetters({
            products: 'allProduct'
        })
    }

然后，就能正常的显示 products。

那么我的问题就是：

1. 在未使用 getters时，mutations 执行之后，改变了 products 的值，那么相应的在 computed 中是不是也应该发生了改变呢？那么为什么视图上不更新呢？
2. Vuex 中的 Getters 在官方文档中的描述意思大概是 state 中一些派生的状态，可理解为 Vue 中的 computed。 想问这里的state中的 products 和 getters 中的 allProducts 表达的是同一个内容，没有体现出派生状态的意思啊？想问就是如何更好的理解 getters和computed?
3. computed 计算属性，原数据 发生改变时，派生数据同步更新，但是这里只是获取 state 中的 products，为什么要使用 getters 才可以呢？

问题有点多，新手一枚，望人帅心善的程序员兄弟们多多指教，感激不尽。

Answer 1

先写下发现的问题吧

1. computed是可以依赖vuex中数据并获取数据的。

2. return this.$store.state.products改为return this.$store.state.products.products就可以了。

3. 至于为什么多了一层。是因为modules,分了模块的会将模块内的state放在state[模块名]这个对象里

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

可以看到。moduleA的状态全在store.state.a这个对象中。

你的问题

1. 为什么没更新，因为获取到的是一个对象。{products:[]}，没有title等属性,无法渲染，当然直接输出{{product}}还是能看到更新后的数据的。

2. 为什么使用了getters就可以正确获取state了呢，因为getters默认获取的是同modules内的数据。

3. 那我估计你对派生的理解也没有疑问了。好比computed的作用，我们用watch和methods配合state也可以做到，为什么要用computed？因为使用computed有明确的依赖关系。

Answer 2

话说要获取getters中的数据不是this.$store.state.xx吧，你把this.$store打印出来看看，应该是this.$store.getters.xx。