vuex 组件中如何使用和修改 state 与 getter数据

一、组件中如何使用 state 与 getter

方案一、使用挂载到 Vue原型上的 $store 对象。这个 $store 就是 new Vuex.Store() 生成的仓库实例对象

方案二 (推荐)、使用 computed

<script>
export default {
  computed: {
    curCity() {
      return this.$store.state.curCity;
    },
    cart() {
      return this.$store.state.cart;
    }
  }
}  
</script>

方案三(推荐、就是方案二的一个优雅写法)、使用 vuex 提供的辅助函数

1. 组件中从 vuex 中引入你需要的辅助函数

2. 调用辅助函数，并将其返回的值赋给组件的 computed 选项

   <script>
   // 引入 辅助函数 。采用类似 解构赋值的方式
   import { mapState } from 'vuex'
   
   export default {
     // mapState 返回值是一个 对象
     computed: mapState(['curCity', 'cart'])
   }  
   </script>
   

mapState 与 mapGetters 的语法

// mapState 接收一个数组做为参数，参数中的每一项，就是在仓库中的 state 数据
mapState([state1, state2, state3])

// mapGetters  接收一个数组做为参数，参数中的每一项，就是在仓库中的 getter 数据
mapGetters([getter1, getter2])

方案二与方案三效果一样，但是在 VueDevtools 中的表现有稍微一点不同

方案二时，插件中显示的是 computed

方案三时，插件中显示的是 vuexbindings

方案二与方案三效果一样，一般我们更推荐大家使用方案三。但是在什么情况下要使用方案二呢？

希望组件中的数据与仓库中的数据用不同的名字的时候。采用方案二

使用方案三时，我们组件自身还有一些自己的computed数据，该如何办？

将 mapState() 使用 … 做展开

二、组件中如何修改state 与 getter数据

state 可以修改。getter 不能修改。

步骤：

1. 仓库中要提供 对应 state 修改的 mutation 函数
2. 在组件中去调用 mutation

调用 mutation 的三套方案：

方案一、直接使用 vuex 绑定到 vue 原型上的 $store 这个对象的 commit() 方法

方案二、在组件中先定义一个函数，函数名跟后续要调用的mutaion名字保持一致，函数内部使用方案一

方案三、使用 mapMutations 辅助函数

// mapMutations的语法
// 接收一个数组作为参数，数组中的每一项是一个 mutation 的名字
mapMutations([mutation1, mutation2, mutation3])

示例

{
	methods: mapMutations(["SETCURCITY", "ADDCART"])
}

示例代码转换就是如下的代码效果

{
  methods: {
    SETCURCITY(payload) {
			this.$store.commit('SETCURCITY', payload)
    },
    ADDCART(payload) {
			this.$store.commit('ADDCART', payload)
		}
  }
}