Vue.js 是一款流行的前端框架，用于构建用户界面。在 Vue 中，Vuex 是一个状态管理库，它提供了一个中心化的存储来管理应用的状态。而Vuex 的 Getter 是一种强化的计算属性，允许开发者从 Store 中的 State 派生出新的状态或进行计算。
在Vuex的Store中，State是用来存储全局共享状态的地方。然而，有时我们需要基于这些状态创建一些衍生状态，例如在本例中，我们需要将商品的价格加倍。Getter 就是用来解决这类问题的。它们类似于 Vue 组件中的计算属性，可以在内部访问 State，并且其结果会被缓存，只有当依赖的 State 值发生变化时，Getter 才会更新。
以下是如何在 Vue 中使用 Getter 的步骤：
1. **安装和配置 Vuex**：
你需要导入 Vue 和 Vuex，然后使用 `Vue.use(Vuex)` 来注册 Vuex。接着，创建一个新的 Vuex Store 实例，其中包含 State、Getters 及其他可能的模块。
2. **定义 Getter**：
在 Store 的 `getters` 对象中定义 Getter 函数。Getter 接收一个 State 作为参数，可以从中访问和操作 State。在本例中，我们定义了一个名为 `goodsPriceDoubble` 的 Getter，它接收 `state`，遍历 `state.goodsList`，并将每个商品的价格乘以2。
3. **在组件中使用 Getter**：
要在 Vue 组件中使用 Getter，需要通过 `this.$store.getters` 访问。在 Page4.vue 组件中，我们创建了一个计算属性 `goodsPriceTwo`，它调用了 `this.$store.getters.goodsPriceDoubble`，从而获取到价格加倍后的商品列表。
4. **模板绑定**：
在 Vue 模板中，可以使用计算属性 `goodsPriceTwo` 来展示价格加倍后商品的信息。通过 `v-for` 循环遍历这个列表，将商品的名称和价格分别绑定到模板元素上。
通过这种方式，Getter 提供了一种封装和复用逻辑的方法，避免了在多个组件中重复计算状态。同时，由于 Getter 是响应式的，当 State 改变时，所有依赖于 Getter 的地方都会自动更新。
总结一下，Vue 中的 Vuex Getter 是一个强大的工具，它可以帮助我们更好地管理和组织应用的状态，提供计算属性的功能来处理 State，并确保数据的正确更新和响应性。在实际开发中，利用 Getter 可以提高代码的可维护性和可读性。通过了解和熟练运用 Getter，开发者能够更好地构建大型的、复杂的 Vue 应用。
