---

一、存在即合理

---

1. Store

  当我们在使用 vue 时，同一个数据可能需要被多处复用，于是你选择创建了一个公共 data ，数据解决了，但是，调试将会变为噩梦，任何时间，我们应用中的任何部分，在任何数据改变后，都不会留下变更过的记录。为了解决这种问题，Store 由此诞生，我们将这个公共 data 放进 Store 中同一管理，当出现错误时，Store 告诉你哪里出错了。

// 在 vue 项目文件中的 main.js 
// Tip:建议在store文件中写store代码,main文件创建vue实例,本文为了方便,写到一块
import Vuex from 'vuex'

Vue.use(vuex);

const store = new Vuex.store({
　　state: {
　　　　nickName: "",
　　　　cartCount: 0　　
　　},
　　mutations: {
　　　　updateUserInfo(state,nickName) {
　　　　　　state.nickName = nickName;
　　　　},
　　　　updateCartCount(state,cartCount) {
　　　　　　state.cartCount += cartCount;
　　　　}
　　},
   actions: {
	   updateUserInfo(context) {
	      context.commit("updateUserInfo");
	   },
	   updateCartCount(context) {
	      context.commit("updateCartCount");
	   }
 }
})
// 新建 Vue 实例
new Vue({
　　el: "#app",
　　store,
　　router,
　　template: '<App/>',
　　components: {App}
})

• Tip：

    Store 中 state 存放公共 data ，而 state 的变更，通过 Store 自身的 action 管理。这种集中式状态管理能够被更容易地理解哪种类型的变更将会发生，以及它们是如何被触发。当错误出现时，会生成 log 记录 bug 之前发生了什么。

2. Action 两种状态管理方式 dispatch && commit

  dispatch 异步管理：用于异步提交、修改数据，例如：我们的图片、视频等资源较大的数据，加载时无法快速渲染完成，此时就需要用异步等待一点一点加载，同时还能进行一些别的“骚操作”，何乐而不为；

  commit 同步管理：同步加载，事要一件件做，不急也不慌。**

---

二、dispatch

---

1. dispatch 使用

// 在我们自定义的组件中使用（结合上文的 Store 实例）
methods: {
  increment(){
    this.$store.dispatch("updateUserInfo", 'nick'); 
  },
  decrement() {
    this.$store.dispatch("updateCartCount", 1); 
  }
 }

---

三、commit

---

1. commit 操作

// 在我们自定义的组件中使用（结合上文的 Store 实例）
methods: {
  increment(){
    this.$store.commit("increment", 'nick'); 
  },
  decrement() {
  	this.$store.commit("decrement", 1);
  }
 }