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);