什么是Vuex?

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

个人理解:Vuex是用来管理组件之间通信的一个插件

为什么要用Vuex?

 组件之间是独立的,组件之间想要实现通信,我目前知道的就只有props选项,但这也仅限于父组件和子组件之间的通信。如果兄弟组件之间想要实现通信呢?方法应该有。抛开怎么实现的问题,试想一下,当做中大型项目时,面对一大堆组件之间的通信,还有一大堆的逻辑代码,会很苦恼,此时我们应该吧组件之间共享的数据给拿出来,在规则下来管理这些数据,这就是Vuex的基本思想

VueX的使用

首先需要下载 vuex

npm i -S vuex

  

然后在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:

import Vue from 'vue';
  import Vuex from 'vuex';
  Vue.use(Vuex);
  const store = new Vuex.Store();
  
  export default store;

接下来,在main.js里面引入store,然后再全局注入一下,这样一来就可以在任何一个组件里面使用this.$store了:

import store from './store'//引入store

new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})

  

再接下来vuex 的核心来了,vuex的五大核心---state,getter,mutation,action,module

state就是一个数据仓库,存放数据的,

回到store文件的indexjs里面,我们先声明一个state变量,并赋值一个空对象给它,里面随便定义两个初始属性值;然后再在实例化的Vuex.Store里面传入一个空对象,并把刚声明的变量state仍里面:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = { //要设置的全局访问的state对象
showFooter: true,
changableNum: 0
//要设置的初始属性值
};
const store = new Vuex.Store({
state
}); export default store;

现在你已经可以使用this.$store.state.showFooter和this.$store.state.changebleNum在任何一个组件里面获取showFooter和changebleNum的值。但这不是很完美的方法,vuex官方API提供了一个getters属性,和vue计算属性computed一样,来实时监听state值的变化,并把它扔进Vuex.Store里面,具体如此:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = { //要 设置的全局访问的state对象
showFooter: true,
changableNum: 0
//要设置的初始属性值
};
const getters = { //实时 监听state值的变化(最新状态)
isShow(state) { //方法名随意,主要 是来承载变化的showFooter的值
return state.showFooter
//在组件中可以用 this.$store.getters.isShow 来获取它的return值
},
getChangedNum() {
// 方法名随意, 主要是用来承载变化的changableNum的值
return state.changableNum
//在组件中可以用 this.$store.getters.getChangedNum 来获取它的return值
}
}
const store = new Vuex.Store({
state,
getters
});
export default store;

光有定义的state的初始值,不改变它不是我们想要的需求,接下来要说的就是mutations了,mutattions也是一个对象,这个对象里面可以放改变state的初始值的方法,具体的用法就是给里面的方法传入参数state或额外的参数,然后利用vue的双向数据驱动进行值的改变,同样的定义好之后也把这个mutations扔进Vuex.Store里面,如下:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state={ //要设置的全局访问的state对象
showFooter: true,
changableNum:0
//要设置的初始属性值
};
const getters = { //实时监听state值的变化(最新状态)
isShow(state) { //承载变化的showFooter的值
return state.showFooter
},
getChangedNum(){ //承载变化的changebleNum的值
return state.changableNum
}
};
const mutations = {
show(state) { //自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);
state.showFooter = true;
},
hide(state) { //同上
state.showFooter = false;
},
newNum(state,sum){ //同上,这里面的参数除了state之外还传了需要增加的值sum
state.changableNum+=sum;
}
};
const store = new Vuex.Store({
state,
getters,
mutations
});
export default store;

这时候你完全可以用this. $store.commit('show)或this. $store.commit("hide')以及this. $store. commit("newNum',6)在别的组件里面进行改变showfooter和changebleNum的值了,这不是理想的改变值的方式;因为在Vuex中,mutations里面的方法都是同步事务,意思就是说:比如这里的一个this.$store.commit( newNum' sum)方法,两个组件里用执行得到的值,每次都是一样的,这样肯定不是理想的需求。

好在vuex官方API还提供了一个actions,这个actions也是个对象变量,最大的作用就是面的Action方法
可以包含任意异步操作,这里面的方法是睐异步触发mutations里面的方法,actions里面自定 义的函数接
收一个context参数和要变化的形参, context 与store实例具有相同的方法和属性,所以它可以执行
context.commit(' "),然后也不要忘了把它也扔进Vuex.Store里面

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state={ //要设置的全局访问的state对象
showFooter: true,
changableNum:0
//要设置的初始属性值
};
const getters = { //实时监听state值的变化(最新状态)
isShow(state) { //承载变化的showFooter的值
return state.showFooter
},
getChangedNum(){ //承载变化的changebleNum的值
return state.changableNum
}
};
const mutations = {
show(state) { //自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);
state.showFooter = true;
},
hide(state) { //同上
state.showFooter = false;
},
newNum(state,sum){ //同上,这里面的参数除了state之外还传了需要增加的值sum
state.changableNum+=sum;
}
};
const actions = {
hideFooter(context) { //自定义触发mutations里函数的方法,context与store 实例具有相同方法和属性
context.commit('hide');
},
showFooter(context) { //同上注释
context.commit('show');
},
getNewNum(context,num){ //同上注释,num为要变化的形参
context.commit('newNum',num)
}
};
const store = new Vuex.Store({
state,
getters,
mutations,
actions
});
export default store;

而在外部组件里进行全局执行actions里面方法的时候,你只需要用执行

this.$store.dispatch('hideFooter')

或this.$store.dispatch('showFooter')

以及this.$store.dispatch('getNewNum',6) //6要变化的实参

这样就可以全局改变改变showfooter或changebleNum的值了,如下面的组件中,需求是跳转组件页面后,根据当前所在的路由页面进行隐藏或显示页面底部的tab选项卡

<template>
<div id="app">
<router-view/>
<FooterBar v-if="isShow" />
</div>
</template> <script>
import FooterBar from '@/components/common/FooterBar'
import config from './config/index'
export default {
name: 'App',
components:{
FooterBar:FooterBar
},
data(){
return {
}
},
computed:{
isShow(){
return this.$store.getters.isShow;
}
},
watch:{
$route(to,from){ //跳转组件页面后,监听路由参数中对应的当前页面以及上一个页面
console.log(to)
if(to.name=='book'||to.name=='my'){ // to.name来获取当前所显示的页面,从而控制该显示或隐藏footerBar组件
this.$store.dispatch('showFooter') // 利用派发全局state.showFooter的值来控制 }else{
this.$store.dispatch('hideFooter')
}
}
}
}
</script>
}else{
this.$store.dispatch('hideFooter')
}
}
}
}
</script>

  

VueX理解的更多相关文章

  1. vuex理解之modules小记

    好记性不如烂笔头 demo预览 源代码 前情提要 关于vuex,其实很久以前就研究使用过,还研究过 flux,redux之类的体系,当时感觉对于 state,action,dispatch,views ...

  2. vuex 理解

    为什么要用vuex?页面由多个视图组成,用户操作会引视图的状态变化. 多个视图依赖于同一状态(例如:菜单导航) 来自不同视图的行为需要变更同一状态(例如:评论弹幕) vuex 的作用 为vue.js开 ...

  3. Vuex理解与使用

    1.Vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,用于管理页面的数据状态.提供统一数据操作的生态系统.在组件中可以任意获取仓库中的数据.和Vuex类似的还有redux ...

  4. vuex所有核心概念完整解析State Getters Mutations Actions

    vuex是解决vue组件和组件件相互通信而存在的,vue理解起来稍微复杂但一旦看懂择即为好用 安装: npm install --save vuex 引入 import Vuex from 'vuex ...

  5. vue2.x中请求之前数据显示以及vuex缓存的问题

    在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很好的处理办法,欢迎提出,自己还在不断优化中... 第一个是vue在加载页面的时候,会先加载静态资源,这个时候数据还没有请求回来,用户 ...

  6. 前端Vue框架-vuex状态管理详解

    新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...

  7. MVC和MVVM设计模式简单理解

    1.mvc设计模式理解 Model: 模型 持有所有的数据状态和业务逻辑; 泛指数据库,链接数据库,建立数据模型 View: 视图 用来展示数据模型在页面上,泛指前端 Controller: 控制器, ...

  8. 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)

    最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...

  9. Vue 全家桶

    第 1 章:Vue 核心 1.1. Vue 的基本认识1.1.1. 官网1) 英文官网: https://vuejs.org/2) 中文官网: https://cn.vuejs.org/ 1.1.2. ...

随机推荐

  1. [项目] 淘淘商城 Part.2

    商品列表查询 Easyui 商品添加 商品类目选择 图片上传 富文本编辑器使用 添加的实现 展示首页 略 分页插件 在SqlMapConfig.xml,配置一个plugin 在sql语句执行之前,添加 ...

  2. S3待机 S4休眠

    https://hceng.cn/2018/01/18/Linux%E7%94%B5%E6%BA%90%E7%AE%A1%E7%90%86/ 1.1系统睡眠模型Suspend On (on) S0 - ...

  3. Ubuntu 20.04 配置多网卡链路聚合

    Ubuntu 20.04 配置多网卡链路聚合 多网卡IP配置 首先查看网卡信息 root@it:~# ip add 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65 ...

  4. 066.Python框架DRF之序列化器Serializer

    一 序列化器-Serializer 作用: 1. 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串 2. 反序列化,把客户端发送过来的数据,经过request以后变成 ...

  5. 5分钟安装docker教程

    Centos安装docker需要操作系统是 CentOS 7 or 8,必须启用centos extras存储库.默认情况下,此存储库处于启用状态,但如果已禁用它,则需要重新启用它. 卸载旧版本 老版 ...

  6. 使用 Flux+Flagger+Istio+Kubernetes 实战 GitOps 云原生渐进式(金丝雀)交付

    在这篇指南中,你将获得使用 Kubernetes 和 Istio 使用 GitOps 进行渐进式交付(Progressive Delivery)的实际经验. 介绍 gitops-istio GitOp ...

  7. Django(41)详解异步任务框架Celery

    celery介绍   Celery是由Python开发.简单.灵活.可靠的分布式任务队列,是一个处理异步任务的框架,其本质是生产者消费者模型,生产者发送任务到消息队列,消费者负责处理任务.Celery ...

  8. 项目中添加lib依赖

    Project Structure-->Artifacts

  9. RMAN CROSSCHECK命令 说明

    CROSSCHECK命令:     用于核对磁盘和磁带上的备份文件,以确保RMAN资料库与备份文件保持同步.注意:该命令只会检查RMAN资料库所记载的备份文件.当执行crosscheck命令时,如果资 ...

  10. Unity 2018.3.0f 版本用C#编程启动VS时出现"Visual Studio 2010 Shell 无效的许可证数据"的解决办法

    C#编程时,启动VS出现的问题如图: 网上有提到用更改注册表的方式,亲测效果未发生改变,在不确定修改后效果如何时,尽量先将原有的数据备份下来: 本文介绍楼主用另外一种方式解决的: 由于脚本系统默认启动 ...