2.Vuex单界面到多界面状态管理切换

1.单界面状态管理

Vue单界面状态自管理应用包含三个部分：

• state：即状态，我们可以把它当作data中的属性。（驱动应用的数据源）
• view：即视图层（我们的template模板），可以针对State的变化，显示不同的信息（以声明方式将 state 映射到视图）
• actions：即交互行为，这里的Actions主要是指用户的各种操作：例如鼠标点击，键盘输入等，都会导致状态(State)的改变.（响应在 view 上的用户输入导致的状态变化。）

循环流程：
我们会将data里面(State)的msg和count数据做绑定渲染到界面上（View），当用户点击button的时候产生了交互行为(actions)，这时候的count会动态的发生响应，修改data里面的count，这意味着又回到了我们的data(State)。

单界面状态管理实现的完整代码

2.多界面状态管理

• 通过上面的代码可以发现，Vue已经帮助我们实现了单个界面的状态管理。
• 对于多个视图都依赖同一个状态（比如一个状态改了，多个界面都需要进行相对应的更新）,Vue就不能实现了，多界面状态变化必须依赖Vuex来完成。
• 这就相当于对于某些状态（状态1，状态2，状态3）来说的话，只属于我们某一个视图，但也有某些状态（例如状态a和状态b）属于多个视图共同需要维护的。
• 对于状态1、状态2、状态3，因为是自己独有的，所以我们完全不用担心，可以放在自己的单独房间中，进行自我管理。
• 但是对于状态a和状态b，因为是多个组件共享状态，我们是希望交给一个大管家来统一帮助我们进行管理状态，这时候，我们依赖的这个大管家就是Vuex。

父子组件之间的传递也是可以实现数据共享的，它也能实现多个组件之间共享状态 （按需采用）。

• 父组件代码

  
  

• 子组件代码

  
  
• 效果
  
  下面使用Vuex进行状态管理

首先安装Vuex插件

npm i vuex --S

安装完成后，在src目录下手动创建一个文件夹：store，（store即仓库的意思）存放我们的vuex相关代码及配置，在store目录下，创建一个index.js文件，用于配置我们的vuex。

打开我们的main.js项目入口文件。

回到我们的index.js文件，创建固定的store对象模板。

这里面我们仅使用state对象。

父组件App.vue使用我们的共享状态count。

子组件HelloVuex.vue使用我们的共享状态count。

虽然可以实现效果，但Vuex不支持我们这样私自绕过它而去修改count。

Vuex大管家（全局单例模式）希望我们这样做,既然你已经将共享状态抽取出来了给我集中统一进行管理，那么就统一进行管理到底吧，我有我的一套规则制定，你们得遵循。

也就是说，之后，你们的每个视图，要按照我规定好的规则，进行访问和修改等操作（你的任何举动都必须让我这个大管家知道，不能绕过我而做出私下的操作，这就是Vuex大管家）。

Vuex状态管理图例分析：

纠错：③这里的commit翻译成提交更加恰当

弄懂了Vuex运行的原理后，我们清楚地知道，官方不支持直接在组件修改我们的State状态，而应该经过Actions--到Mutations这样一个步骤，又因为我们这里没有用到异步操作，所以可以直接跳过Actions步骤，直接来到Mutations修改步骤。

上面的这种私自越过Mutations步骤修改State状态就应该变成下面的代码，这一切都是为了方便我们最终的Devtools插件的跟踪调错。



Vuex的State和Mutations使用小结：

• 1.提取一个公共的store对象，用于保存多个组件中的共享状态，我们一般采取另辟目录，放在store/index.js下。
• 2.将store对象挂载放在在new Vue实例对象中（也就是项目入口文件的main.js），这样可以确保在所有的组件中都可以使用到。
• 3.在其他组件中使用对象中保存的状态。

（1）可以通过this.$store.state. 属性的方式来访问状态State

（2）可以通过this.$store.commit('在mutations定义的方法名')来修改（mutate）状态。

通过mutations方式修改和对比直接修改的好处

• 我们通过提交(commit)mutations的方式，而非直接改变store.state.count

• Vue-devtools 可以更明确追踪状态的变化，所以不推荐直接改变store.state.count的值。