1.1 vuex简介
参考博客：https://www.cnblogs.com/first-time/p/6815036.html
1、什么是Vuex？
1. 官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。
2. 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
3. 个人理解：Vuex是用来管理组件之间通信的一个插件
2、vuex作用
1. 我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只有props选项，但这也仅限于父组件和子组件之间的通信。
2. 如果兄弟组件之间想要实现通信呢？当做中大型项目时，面对一大堆组件之间的通信，还有一大堆的逻辑代码，会不会很抓狂？？
3. 那为何不把组件之间共享的数据给“拎”出来，在一定的规则下管理这些数据呢？ 这就是Vuex的基本思想了。
总结：使用vuex作用就是实现组件间数据共享
3、vuex原理
1. vue团队为了简化组件间的通信，将state抽象成一个单例模式，将其放到全局，让各个组件都能共享使用
2. vuex数据传递是单向的：action ---> mutation ---> state ---> component ---> action
vue component指的就是我门定义的组件
action 交互中产生的动作
mutations 动作产生的修改数据的行为
state 共享数据
3. vuex设计的时候相对修改的行为做单测（测试），开发了devtools来做测试，只能检测同步的操作
4. 规范定义：只能在mutations中做同步操作，所以增加了action来异步处理数据
5. 将mutations中的异步操作转移到actions中了，这样就可以测试同步的操作了
1.2 vuex使用（vuex使用分为以下两步）
1、第一步：实例化一个store
注：vuex.store用来创建store，参数对象中，可以定义各个模块
1. state定义状态模块（存储数据的），存放组件之间共享的数据
2. getters定义动态的数据，类似组件中的computed动态数据
3. mutations:定义改动states的动作行为，类似观察者模式中的订阅事件on
4. action：定义这些交互动作（异步），类似观察者模式中的订阅事件方法on（只不过是用来处理异步的）
2、第二步：在vue实例化对象中，注册store
1. 将第一步的实例化对象注册进来，注册路由后，组件实例化对象有了$route属性对象
2. 注册store，组件实例化对象有了$store属性对象，这个store对象有下面这些方法
$.store.commit用来触发mutations订阅的消息
$.store.dispatch用来触发action订阅的消息的
$.store.state使用状态中的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1 @click="$store.commit('reduce', 20);">vue实例化对象:点击减20</h1> <h2 @click="$store.dispatch('dealNum', 10, 20, 30)">更新数据：将num两秒后重置为：10</h2> <h1>state中的数据 {{$store.state.num}}</h1> <h2>双倍num {{$store.getters.doubleNum}}</h2> <router-view></router-view> <!-- 定义渲染的容器 --> </div> <template id="home"> <div> <h1 @click="$store.commit('add', 10, 'hello')">home：点击加10</h1> <h2>home组件中 {{$store.state.num}}</h2> <router-view></router-view> <!-- 第一步 定义子路由渲染的容器 --> </div> </template> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="vue-router.js"></script> <script type="text/javascript" src="vuex.js"></script> <script type="text/javascript"> // 定义组件 var Home = { template: '#home' }; // 第一步 定义路由规则 var routes = [ { path: '/home', name: 'home', component: Home } ]; // 定义store第一步 定义store实例化对象 var store = new Vuex.Store({ state: { // 定义状态 num: 0 }, getters: { // 定义动态绑定的数据 doubleNum: function(state) { return state.num * 2; } }, mutations: { // 修改的消息 add: function(state, num) { // 增加num值 state.num += num; }, reduce: function(state, num) { // 减少num值 state.num -= num; }, resetNum: function(state, num) { state.num = num; } }, actions: { // 定义actions dealNum: function(context, num) { setTimeout(function() { // 我们可以异步提交 context.commit('resetNum', num) }, 2000) } } }); // 第二步 实例化路由对象 var router = new VueRouter({ routes: routes // 定义路由规则 }); // 第三步 注册路由 和 store对象 var app = new Vue({ el: '#app', // 注册路由 router: router, store: store // 使用vuex第二步 注册store }) </script> </body> </html>
