什么是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. 读HikariCP源码学Java(一)-- 通过ConcurrentBag类学习并发编程思想

    前言 ConcurrentBag是HikariCP中实现的一个池化资源的并发管理类.它是一个高性能的生产者-消费者队列. ConcurrentBag的并发性能优于LinkedBlockingQueue ...

  2. 常用加密算法学习总结之散列函数(hash function)

    散列函数(Hash function)又称散列算法.哈希函数,散列函数把消息或数据压缩成摘要,使得数据量变小,将数据的格式固定下来.该函数将数据打乱混合,重新创建一个叫做散列值(hash values ...

  3. [刷题] PTA 6-11 求自定类型元素序列的中位数 (25分)

    采用希尔排序 1 #include <stdio.h> 2 3 #define MAXN 10 4 typedef float ElementType; 5 6 ElementType M ...

  4. jmeter 非GUI模式下传参

    为什么要使用非GUI模式?--因为GUI模式下运行的时候消耗的内存比非GUI模式大,会使得压力测试的结果不准确. 根据参数类型分为两种:jmeter.properties和system.propert ...

  5. k8s集群部署(2)

    一.利用ansible部署kubernetes准备阶段 1.集群介绍 基于二进制方式部署k8s集群和利用ansible-playbook实现自动化:二进制方式部署有助于理解系统各组件的交互原理和熟悉组 ...

  6. 018.Python迭代器以及map和reduce函数

    一 迭代器 能被next进行调用,并且不断返回下一个值的对象 特征:迭代器会生成惰性序列,它通过计算把值依次的返回,一边循环一边计算而不是一次性得到所有数据 优点:需要数据的时候,一次取一个,可以大大 ...

  7. 在pycharm进行单元测试(unittest python)

    在Edit Configuration中添加Python test 选中相应的脚本或者文件夹 # coding:utf-8 import unittest import requests from c ...

  8. Step By Step(Lua数据结构)

    Step By Step(Lua数据结构) Lua中的table不是一种简单的数据结构,它可以作为其它数据结构的基础.如数组.记录.线性表.队列和集合等,在Lua中都可以通过table来表示.     ...

  9. 异步编程CompletableFuture

    多线程优化性能,串行操作并行化 串行操作 // 以下2个都是耗时操作 doBizA(); doBizB(); 修改变为并行化 new Thread(() -> doBizA()).start() ...

  10. 旷视MegEngine网络搭建

    旷视MegEngine网络搭建 在 基本概念 中,介绍了计算图.张量和算子,神经网络可以看成一个计算图.在 MegEngine 中,按照计算图的拓扑结构,将张量和算子连接起来,即可完成对网络的搭建.M ...