最近在看vuex，是vue中比较重要的一个环节，也是面试的时候，经常会问到的，其实，没看vuex之前，感觉vuex会挺难，看完之后... 就这啊... 咳咳，让我们进去正题。

vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

这是官方对vuex的解释，查阅资料之后，对vuex有了一个初步的认识，首先vuex是个插件，那他肯定是以Vue.use( )的方式使用，其次，它是一个类似于公共组件的东西，像一个大盒子，里面装了很多键值对，所有页面都能十分方便的调用和修改其中的值，能有效解决下面这种问题

现在有ABCD四个组件，都想使用A组件里面的值，如果使用bus总线的方式传递数据，十分复杂和冗余，但是如果使用vuex来管理A组件里面的值，就会是下面这种情况

就不用解释和看代码，单看这种图，你就会觉得简洁和干净许多，这就是vuex的作用

当然，不是所有的项目都适合用vuex，这也是官方提醒大家的

简单来说，逻辑和页面不复杂的小项目，用刚才那种bus总线的方式就能实现，不需要用到vuex，但是像上面那个ABCD四个组件来回传值的大项目，就适用于vuex，这也是大公司面试肯定会考你vuex的原因。

vuex怎么用？

那么vuex怎么用呢，先看一张官方的vuex工作流程图

vuex的组成：

state:是存储的基本数据。
mutations:提交更改数据。
getter:对state加工，和computed计算属性一样。
actions：处理异步，通过store.commit方法触发mutations中的方法，从而改变state值。
module：是store分割的模块，每个模块拥有自己的state、mutations、getters、actions。

起点是绿色，经过黄色、红色、紫色，最后又回到绿的完成一次完整的vuex改修流程

具体点的话就是：

通过dispatch去提交一个actions（绿到黄）
actions接收到这个事件之后，在actions中可以执行一些异步|同步操作，根据不同的情况去分发给不同的mutations（黄）
actions通过commit去触发mutations（黄到红）
mutations去更新state数据，state更新之后，就会通知vue进行渲染（红到紫紫到绿）

代码：

//App.vue
<template><div id="app"><button @click="increment">增加</button>{{this.$store.getters.getCount}}</div></template><script>export default {methods: {increment(){//第一步:this.$store.dispatch("increment")触发actions函数"increment"this.$store.dispatch("increment")}}}</script>

//store.js
const store =  new Vuex.Store({state: {count: 0},//第三步：改变state值，state的值只能通过mutations来修改mutations: {increment(state) {state.count++}},//第二步：this.$store.commit("increment")触发mutations中函数"increment"actions: {increment({commit}) {commit("increment"); //this.$store.commit("increment")}},//第四步：通过getter中的方法来获取state值getters: {getCount(state) {return state.count}}})export default store

以上就是俺对vuex的初步认识了

vuex是什么？怎么用？相关推荐

【实用】Angular中如何实现类似Vuex的全局变量状态变化功能？
什么是Vuex?只需三分钟!只需创建一个vuex.js文件,让你马上学会使用Vuex,尽管Vuex是个鸡肋!(扔掉store文件夹和里面的index.getters.actions.mutations ...
只需三分钟！只需创建一个vuex.js文件，让你马上学会使用Vuex，尽管Vuex是个鸡肋！(扔掉store文件夹和里面的index、getters、actions、mutations等js文件吧！)
前情提示:有一天,我要实现一个效果→点击某个按钮改变一个全局变量,并且要让绑定了该变量的所有位置异步渲染.我试过用一个全局的js文件存放该变量,该变量值虽然改变了,但是没有做到异步渲染.接着我用win ...
vuex+vue-router拦截
干就完了项目中经常遇到这样一个场景,用户信息或者进行增删改的一些模块,需要根据用户是否登录,进行路由拦截,直接上代码在store文件夹下的store.js中存放一个默认登录状态 /** store ...
mutations vuex 调用_Vuex源码学习（六）action和mutation如何被调用的（前置准备篇）...
前言 Vuex源码系列不知不觉已经到了第六篇.前置的五篇分别如下: 长篇连载:Vuex源码学习(一)功能梳理长篇连载:Vuex源码学习(二)脉络梳理作为一个Web前端,你知道Vuex的instal ...
在vue中使用vuex,修改state的值示例
1. 安装 vuex npm install vuex -S 2.在目录下创建store文件 3. 在store.js编辑一个修改state的方法然后在mian.js中全局引入最后在组件中使用这 ...
vue之mapMutaions的使用 vuex中 action 用法示例 api.js的使用
vue之mapMutations的使用我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
基于Vue, Vuex 和 ElementUI 构建轻量单页Hexo主题Lite
Hexo Theme Lite Keep Calm, Lite and Writing. light single page blog application theme, using Vue, Vu ...
详解 Vue Vuex 实践
2019独角兽企业重金招聘Python工程师标准>>> 随着应用复杂度的增加,我们需要考虑如何进行应用的状态管理,将业务逻辑与界面交互相剥离,详细讨论参考笔者的2016-我的前端之路 ...
vue总结 08状态管理vuex
状态管理类 Flux 状态管理的官方实现由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管理库 ...
使用vue2.0 vue-router vuex 模拟ios7操作
其实你也可以,甚至做得更好... 首先看一下效果:用vue2.0实现SPA:模拟ios7操作与通讯录实现 github地址是:https://github.com/QRL909109/ios7 如 ...

vuex是什么？怎么用？

vuex是什么？

vuex怎么用？

vuex是什么？怎么用？相关推荐

最新文章

热门文章