vuex的理解及用法！

vuex的理解与用法

什么是vuex？

顾名思义vuex就是一个公共的状态库。通俗点讲，vuex是所有组件的公共状态，是存放公共的数据以及对数据进行处理的一个库。
在之前没有用vuex之前，组件之间传值都是通过ref和prop以及自定义的事件传值。在使用了vuex之后，这一切就变的简单了许多。
vuex的组成

• state:：是一个数据库，存放数据的，相当于vue实例里的data，只不过后者是私有的，前者是公共的。
• mutation：对state里的数据进行处理，存放事件的。只能执行同步的。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {       //所有事件的第一个参数都是state，用于接受state里的状态并进行处理
      // mutate state
      state.count++
    }
  }
})

这里的事件不能直接执行，需要vue文件里对其进行注册绑定

举个简单的例子。
页面上有一个div，我给他绑定了一个事件@click='add'
那么则需要在js的事件属性中进行绑定及执行
methods：{
	add(){
		this.$store.commit('increment')     //这个点击事件就进行了注册并执行了vuex中的 increment事件
	}
}

这里我们还可以传第二个参数，指定一个数据传过去，我简单的写了下大家可以看下

• Actions：类似于mutation，但它不是直接修改数据，而是提交mutation并且可以进行异步操作
  比如我们想要在5秒后改变state的值，我们不能直接通过mutation来进行操作，所以我们需要先把事件绑定给actions，经过处理然后再传给mutation拿上述代码来讲
  

• getters：计算属性，根据存储状态计算派生状态。

剩下的因时间原因暂时就到这里，后续还会进行修改，以上都是我的个人理解，仅供参考，如有错误请大家指出来，第一次在这里写博客，希望多多支持，后续我还会发表一些自己理解的面向对象及作用域。
觉得还可以的可以点个关注。

以下是我的联系方式，有志同道合的朋友可以加一下我们互相探讨一下。感谢支持
VX：17600066566
qq：8324183