Vuex
vuex简介
1.主要应用于Vue.js中管理数据状态的一个库
2.通过创建一个集中的数据存储，供程序中所有组件访问
3.单一的数据源(store)
单一使用vue.js
使用vuex
使用vue-cli脚手架创建vue项目
1.全局安装脚手架 vue-cli npm install -g @vue/cli
2.使用vue命令创建vue项目 vue create vuex_demo(项目名称)
3. 安装插件vuex npm install vuex --save
项目结构如下
vuex_demo功能
统一管理数据状态，实例效果如下：当点击功能按钮（不考虑项目需求，仅仅只为使用体验vuex对数据的统一管理）如图：
项目结构及主要文件
main.js
实例化vue组件的入口，文件中引入store.js 并在实例化事传入引入的store对象。即：
store.js
各个组件共享数据的存储位置，以及各个钩子函数调用及处理函数，该文件主要引入 vue,vuex两个插件（不同的项目结构，引用的位置不同，可统一在main.js中引用）项目源码：
About.vue
路由跳转的组件，该组建中引入ProductOne.vue ProductTwo.vue两个组件用于展示共享的数据，即：
ProductOne.vue
该组件展示并使用store的存储数据，并循环显示到界面，即：
ProductTwo.vue
该组件展示并使用store的存储数据，并循环显示到界面，即：
启动项目并运行
使用命令启动项目 npm run serve 在浏览器中查看效果,点击按钮，查看数据变化。
总结
vuex使用共享数据的状态管理模式，统一对数据进行管理，即核心方法主要是 state,getters，mutations，action
state
提供共享数据，并实施保存数据的变化的状态。所有组件使用获取方法
this.$store.state.对象名
getters
处理共享数据返回数据的当前状态，可进行对数据的处理与过滤核心触发方法 this.$store.getters.方法名;
mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，更改数据状态。核心触发方法this.$store.commit(‘方法名’)
action
action与mutations不同：
action 提交的是 mutation，而不是直接变更状态。
action 可以包含任意异步操作。
核心触发方法：this.$store.dispatch(‘方法名’,params);