二、最基本的vuex的使用

二、最基本的vuex的使用：

学习任何技术，先找到没有用这个技术时，给我们带来了什么麻烦

而这个新技术是怎么帮我们解决这些问题的。

理解方式：

• state：装数据的一个对象

• mutations：装方法的一个对象，其中的方法：可以更改state中的属性

  有且只有mutations中的方法才能更改state中的属性

问题：

1. 如何在视图上使用state中的数据

   • Vuex提供的mapState()与计算属性结合

2. 如何在组件中使用mutations中的方法

   • Vuex提供的mapMutations()，放入methods中，直接在视图上使用

   • 通过vue实例访问

   • 其他…

     this.$store.commit('方法名', payload); //payload可以是一个对象
     this.$store.commit({
         type: '方法名',
         参数名1: 参数值,
         参数名2: 参数值,
         参数名3: 参数值
     });
     

当传入的参数>2个时，payload需要写成对象的形式

案例：

src>store>index.js

组件中使用

结果：