浅谈Vuex@2.3.0 中的 state 支持函数申明

关于Vuex2.3.0版本中的state支持函数声明，我们可以分别从以下几个方面进行详细讲解：

1. 什么是Vuex中的state？
2. Vuex@2.3.0版本中state支持函数申明的特性介绍
3. 函数式声明state的优劣势
4. 示例说明
5. 总结

1. 什么是Vuex中的state？

在vue.js中，我们经常遇到组件之间的状态共享问题，这些组件之间的状态是需要共享的，而这种共享就需要靠下文的状态管理库vuex实现，而state就是Vuex中管理数据的地方。Vuex将应用程序中的所有组件的共享状态抽取出来，以一个全局单例对象来管理，即state对象。

2. Vuex@2.3.0版本中state支持函数申明的特性介绍

在Vuex@2.3.0版本中新增了一个特性，就是state支持函数声明。这意味着，我们在定义state时，可以使用函数返回值作为state的值，而不仅仅是一个对象。

例如，我们可以这样定义state:

const store = new Vuex.Store({
  state: () => ({
    count: ''
  }),
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

在上面的例子中，我们将state使用函数式声明，返回一个对象，这种写法与最初的写法是等价的：

const store = new Vuex.Store({
  state: {
    count: ''
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

3. 函数式声明state的优劣势

通过函数式声明state的方式，在一些场景下比起对象式声明state有很大的优势。不同于对象式声明，函数式声明能够接收参数，这样我们就能够通过参数的不同去动态的更改state的值，而对象式声明这种方式是很难做到这点的。

但是函数式声明不太方便，因为当你的state对象变得非常大的时候，你就需要在函数声明中去定义这个对象的所有结构，这必定会增加一些不必要的复杂性。

综上所述，在定义state时，我们需要根据具体情况选择使用对象式或函数式声明。如果需要动态计算 state 值，我们就使用 函数式声明；如果不需要，则使用 对象式声明 更加方便简洁。

4. 示例说明

下面我们以一个购物车的例子来说明一下state函数式声明的用法：

const store = new Vuex.Store({
  state: () => ({
    products: [
      { id: 1, name: "商品1", price: 100, count: 1 },
      { id: 2, name: "商品2", price: 200, count: 1 }
    ]
  }),
  mutations: {
    increment (state, {productId}) {
      const product = state.products.find(p => p.id === productId)
      product.count++
    }
  },
  getters: {
    totalPrice: state => state.products.reduce((total, product) => total + product.price * product.count, 0)
  }
})

在上面的例子中，我们使用函数式声明state，将products定义为返回一个对象的函数。这样，我们就可以使用products的计算属性来动态计算产品的总价。同时，我们还定义了一个可变的mutation，可以传递productId参数去增加产品的数量。

5. 总结

总的来说，在Vuex@2.3.0后，我们可以使用函数式声明state，来更方便的动态计算state的值。当state对象变得比较大时，函数式声明的方式也会比对象式声明更加方便。但是，在使用时需要注意函数式声明可能会增加一些不必要的复杂性。