Vuex

Vuex是什么

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），
让其在各个页面上实现数据的共享包括状态，并且可操作
Vuex分成五个部分：
1.State：单一状态树
2.Getters：状态获取
3.Mutations：触发同步事件
4.Actions：提交mutation，可以包含异步操作
5.Module：将vuex进行分模块

vuex使用步骤

安装
打开cmd命令，切换到你项目所在的盘符，然后cd 项目路径，安装加载：npm install vuex -S
创建store模块，分别维护state/actions/mutations/getters

在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块

const store = new Vuex.Store({state,getters,actions,mutations})

在main.js中导入并使用store实例

new Vue({
	el: '#app',
	router,
	store, //在main.js中导入store实例
	components: {
		App
	},
	template: '<App/>',
	data: {
		//自定义的事件总线对象，用于父子组件的通信
		Bus: new Vue()
	}
      })

store
每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)

const store = new Vuex.Store({
       state,    // 共同维护的一个状态，state里面可以是很多个全局状态
       getters,  // 获取数据并渲染
       actions,  // 数据的异步操作
       mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里
      })

state(保存数据的容器)状态，即要全局读写的数据

const state = {
        resturantName:'飞歌餐馆'
      };

getters(getXxx) 获取数据并渲染

const getters = {
       resturantName: (state) => {
         return state.resturantName;
       }
     };

注1：getters将state中定义的值暴露在this.$store.getters对象中，我们可以通过如下代码访问this.$store.getters.resturantName

 注2：state状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态，如下：
      computed: {
        resturantName: function() {
          return this.$store.getters.resturantName;
        }
      }

mutations(setXxx)处理数据的唯一途径，state的改变或赋值只能在这里

export default {
        // type(事件类型)： 其值为setResturantName
        // payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器
	setResturantName: (state, payload) => {
          state.resturantName = payload.resturantName;
	}
      }

actions数据的异步(async)操作

export default {
     setResturantNameByAsync: function(context, payload) {
       setTimeout(() => {
         context.commit('setResturantName', payload);//Action提交的是mutation
       }, 3000);
     }
   }