Vuex的基础使用

vuex的基础使用

vuex可以简单的理解成是一个vue项目的一个仓库，所有的组件都有权限可以获取这个仓库中的值，它的出现，可以让我们减少使用复杂的组件之间的传值

• state

• state是用于存放公共使用数据源的
• 访问state中的数据可以使用this.$store.state.变量名
• 也可以使用vuex中的mapState函数，配合computed计算属性来使用
  

• mutations

• mutations是vuex为我们提供来修改state中数据的一个接口
• 只有mutations才能修改state的数据，直接暴力的修改state中的数据是不合法的
• 在组件中使用this.$store.commit(‘方法名’) 这里的方法名是mutations中定义的方法名来访问mutations中的方法
• 组件进行传参修改数据的时候，mutations中的方法第一个形参始终都是state数据
• mutations是不能够执行异步操作的，异步操作需要使用actions来操作
  
  

actions

• 因为mutations是不能够操作异步代码的，所以vuex提供了actions来让我们进行异步的操作，但是要注意的是，actions不能够操作state中的数据，有且只有mutations才能够操作state中的数据
• 在组件中使用this.$store.dispatch(‘方法名’) 这里的方法名是actions中的方法
• 也可以使用vuex提供的mapActions方法
  
  
  

getters

• getters是我们用于修饰state中的数据的方法，和computed的性值很类似
• getter的方法 我们要修饰成什么样 就retun出什么样的值即可
• 在组件中可以使用this.$store.getters.方法名 也可以使用vuex提供的mapGetters函数
• mapGetters函数是放在组件中的computed计算属性中
  
  

因为vuex涉及到的方法和组件中使用的方法名是很多的，我们只需要记住以下

• mutations ---- this.$store.commit() mapMutations
• actions ---- this.$store.dispatch() mapActions
• getters – this.$store.getters() mapGetter