什么是vuex?

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

为什么要用vuex?

  • 对于父子组件之前的通信,父组件通过porps传递到子组件,子组件通过$emit发送事件到父组件;父组件还可以通过ref的方式拿子组件的值并共享;

  • 对于组件与组件之间的通信,可以new一个新的Vue实例,专门用来做event bus进行通信。怎么用?

  • 当多个组件之间共享一个状态时,event bus可能就变成乱了

怎么用?

  组件A的js中:  this.$store.dispatch('get_beforeVote_params',this.dynamicValidateForm.email);            //设值

  组件B的template中:<p>{{'beforeVoteParams:'+$store.state.vote.beforeVoteParams}}</p>                   //引用值

  组件B的js中:   如果没有引用这句话:import store from '@/store/index'         就:this.$store.state.vote.beforeVoteParams 直接用;

          如果引用了这句话:import store from '@/store/index'         就:store.state.vote.beforeVoteParams   可以取值;

1)入口文件中要引入同级目录下的:import store from './store'      //import store from './store'/index.js   index.js是省略的写法

vue用的版本是:"vue": "^2.3.3",

vuex用的版本是:"vuex": "^2.3.1",

并且要加入进来:

  new Vue({
    router,
    store,
    axios,
    template: '<App/>',
    components: { App }
  }).$mount('#app');

2)目录如下:

  

3)在index.js中:

import Vue from 'vue';
import Vuex from 'vuex';
import getters from './getters';
import user from './modules/user';
import permission from './modules/permission';
import vote from './modules/vote'; Vue.use(Vuex); const store = new Vuex.Store({
modules: {
user,
permission,
vote
},
getters
}); export default store

4)在getter.js中:

我们可以在store中定义getters,第一个参数是state;

传参:定义的Getters会暴露为store.getters对象,也可以接受其他的getters作为第二个参数;

const getters = {
paramsself:state =>state.vote.beforeVoteParams,
};
export default getters

页面上可以这么用:<p>{{'paramsself:'+$store.getters.paramsself}}</p>

5)在vote.js中:

const vote = {
state: {
beforeVoteParams : '',
index:"queryHoldVolume11115"
},
mutations: {
GET_BEFOREVOTE_PARAMS:(state,item)=>{
state.beforeVoteParams = item;
}
},
actions: {
get_beforeVote_params:({commit},item)=>{
commit('GET_BEFOREVOTE_PARAMS',item)
},
}
}; export default vote;

差不多就是这么用的。

    state,      <!--状态-->

    getters,    <!-- 状态的计算属性 -->

    mutations,  <!-- 用于改变状态 -->

    actions,   <!-- 可包含异步操作的mutation -->

3.mapGetters

mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性中,用法和mapState类似

此图来源别处;

vuex是什么?怎么用,例子的更多相关文章

  1. 举个例子去理解vuex(状态管理),通俗理解vuex原理,通过vue例子类比

    通俗理解vuex原理---通过vue例子类比   本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...

  2. Vuex详解笔记2

    关于 state 每个vuex 应用只有一个 store 实例,所以使用起来不会太复杂,对于定位错误状态和操作会很方便. 简单用法:在vuex 的计算属性中返回vuex 的状态 最基本的使用方式,通过 ...

  3. vue.js和vue-router和vuex快速上手知识

    vue.js和vue-router和vuex快速上手知识 一直以来,认为vue相比react而言,学习成本会更低,会更简单,但最近真正接触后,发现vue的各方面都有做一些客户化的优化,有一些亮点,但也 ...

  4. Vuex源码分析(转)

    当我们用vue在开发的过程中,经常会遇到以下问题 多个vue组件共享状态 Vue组件间的通讯 在项目不复杂的时候,我们会利用全局事件bus的方式解决,但随着复杂度的提升,用这种方式将会使得代码难以维护 ...

  5. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇——多页面VueSSR+热更新Server)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前 ...

  6. vuex2.0源码分析

    当我们用vue在开发的过程中,经常会遇到以下问题 多个vue组件共享状态 Vue组件间的通讯 在项目不复杂的时候,我们会利用全局事件bus的方式解决,但随着复杂度的提升,用这种方式将会使得代码难以维护 ...

  7. vuex的学习例子

    最近在学习vuejs,一直有听说vuex,用来实现多组件共享的一种状态管理模式,但是网上都说,不要为了用vuex而用vuex,大概意思就是尽量少用vuex,一些小项目可以用bus来实现组件之间的传值问 ...

  8. vuex的 例子

    最近在学习vuejs,一直有听说vuex,用来实现多组件共享的一种状态管理模式,但是网上都说,不要为了用vuex而用vuex,大概意思就是尽量少用vuex,一些小项目可以用bus来实现组件之间的传值问 ...

  9. 通俗理解vuex原理---通过vue例子类比

    本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用 vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以 ...

  10. vuex 快速上手,具体使用方法总结(含使用例子)

    网上有关vuex的文章很多,但有些比较复杂,这篇文章能让你快速使用vuex: vuex 用处:管理全局状态(类似全局变量,每个组件都能访问到) vuex 用法: //下面是一个js文件,用最简单最全的 ...

随机推荐

  1. java泛型之泛型边界

    http://blog.csdn.net/renwuqiangg/article/details/51296621

  2. Android API Guides---Bluetooth

    Bluetooth Android平台包含蓝牙网络协议栈,它同意设备以无线方式与其他蓝牙设备进行数据交换的支持.应用程序框架提供了訪问通过Android蓝牙API的蓝牙功能.这些API使应用程序无线方 ...

  3. ItcastOA_设计BaseDao_设计DAO接口和实现类_写DAO实现类中的方法内容

    3. 基础功能 3.1. 设计BaseDao接口与BaseDaoImpl类 每个实体都应有一个对应的Dao,他封装了对这个实体的数据库操作.例 实体Dao接口实现类 ================= ...

  4. 如何正确设置 Informix GLS 及 CSDK 语言环境

    本文介绍 GLS 相关知识,说明如何正确设置 Informix GLS 语言环境相关变量(DB_LOCALE,CLIENT_LOCALE),保证 Informix 数据库服务器.客户端能正确的支持中文 ...

  5. 用一个二维码做下载地址,自动区分是 ios 还是 android

    用一个二维码做下载地址,自动区分是 ios 还是 android, 甚至区分 iphone  和 ipad. <html> <head> <meta http-equiv ...

  6. Android 获取当前应用的版本号和当前系统的版本号

    1.获取当前程序版本名 我们可以在AndroidManifest.xml中设置程序的版本号等,如android:versionName="1.0",那如果想在代码中获取这个版本号呢 ...

  7. json写入到excel表

    1. 拼接返回的json数据 // 拼接需要下载报表的HTML,并返回html;reportHtml(reporttData) { let html = `<html xmlns:o=" ...

  8. angular4 在页面跳转的时候传递多个参数到新页面

    页面跳转 router.navigate //单一参数: this.router.navigate(['/detail',id]); //多个参数: this.router.navigate(['/d ...

  9. JSTL-标准标签库

    JSTL1.2中的标签库可以分成5类区域      核心:uri="http://java.sun.com/jsp/jstl/core"  prefix=“c”      XML: ...

  10. 使用Ansible自动配置Nginx服务

    1.首先安装好Ansible环境,具体步骤请见Ansible安装 2.先创建hosts文件(为后面编写脚本安装JDK做铺垫) [root@localhost /]# vi hosts [jdktest ...