vuex是什么?怎么用,例子
什么是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是什么?怎么用,例子的更多相关文章
- 举个例子去理解vuex(状态管理),通俗理解vuex原理,通过vue例子类比
通俗理解vuex原理---通过vue例子类比 本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...
- Vuex详解笔记2
关于 state 每个vuex 应用只有一个 store 实例,所以使用起来不会太复杂,对于定位错误状态和操作会很方便. 简单用法:在vuex 的计算属性中返回vuex 的状态 最基本的使用方式,通过 ...
- vue.js和vue-router和vuex快速上手知识
vue.js和vue-router和vuex快速上手知识 一直以来,认为vue相比react而言,学习成本会更低,会更简单,但最近真正接触后,发现vue的各方面都有做一些客户化的优化,有一些亮点,但也 ...
- Vuex源码分析(转)
当我们用vue在开发的过程中,经常会遇到以下问题 多个vue组件共享状态 Vue组件间的通讯 在项目不复杂的时候,我们会利用全局事件bus的方式解决,但随着复杂度的提升,用这种方式将会使得代码难以维护 ...
- Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇——多页面VueSSR+热更新Server)
Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(下篇--多页面VueSSR+热更新Server) @(HTML/JS) 这是Vue多页面框架系列文章的第二篇,上一篇(纯前 ...
- vuex2.0源码分析
当我们用vue在开发的过程中,经常会遇到以下问题 多个vue组件共享状态 Vue组件间的通讯 在项目不复杂的时候,我们会利用全局事件bus的方式解决,但随着复杂度的提升,用这种方式将会使得代码难以维护 ...
- vuex的学习例子
最近在学习vuejs,一直有听说vuex,用来实现多组件共享的一种状态管理模式,但是网上都说,不要为了用vuex而用vuex,大概意思就是尽量少用vuex,一些小项目可以用bus来实现组件之间的传值问 ...
- vuex的 例子
最近在学习vuejs,一直有听说vuex,用来实现多组件共享的一种状态管理模式,但是网上都说,不要为了用vuex而用vuex,大概意思就是尽量少用vuex,一些小项目可以用bus来实现组件之间的传值问 ...
- 通俗理解vuex原理---通过vue例子类比
本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用 vuex其实是集中的数据管理仓库,相当于数据库mongoDB,MySQL等,任何组件都可以 ...
- vuex 快速上手,具体使用方法总结(含使用例子)
网上有关vuex的文章很多,但有些比较复杂,这篇文章能让你快速使用vuex: vuex 用处:管理全局状态(类似全局变量,每个组件都能访问到) vuex 用法: //下面是一个js文件,用最简单最全的 ...
随机推荐
- java泛型之泛型边界
http://blog.csdn.net/renwuqiangg/article/details/51296621
- Android API Guides---Bluetooth
Bluetooth Android平台包含蓝牙网络协议栈,它同意设备以无线方式与其他蓝牙设备进行数据交换的支持.应用程序框架提供了訪问通过Android蓝牙API的蓝牙功能.这些API使应用程序无线方 ...
- ItcastOA_设计BaseDao_设计DAO接口和实现类_写DAO实现类中的方法内容
3. 基础功能 3.1. 设计BaseDao接口与BaseDaoImpl类 每个实体都应有一个对应的Dao,他封装了对这个实体的数据库操作.例 实体Dao接口实现类 ================= ...
- 如何正确设置 Informix GLS 及 CSDK 语言环境
本文介绍 GLS 相关知识,说明如何正确设置 Informix GLS 语言环境相关变量(DB_LOCALE,CLIENT_LOCALE),保证 Informix 数据库服务器.客户端能正确的支持中文 ...
- 用一个二维码做下载地址,自动区分是 ios 还是 android
用一个二维码做下载地址,自动区分是 ios 还是 android, 甚至区分 iphone 和 ipad. <html> <head> <meta http-equiv ...
- Android 获取当前应用的版本号和当前系统的版本号
1.获取当前程序版本名 我们可以在AndroidManifest.xml中设置程序的版本号等,如android:versionName="1.0",那如果想在代码中获取这个版本号呢 ...
- json写入到excel表
1. 拼接返回的json数据 // 拼接需要下载报表的HTML,并返回html;reportHtml(reporttData) { let html = `<html xmlns:o=" ...
- angular4 在页面跳转的时候传递多个参数到新页面
页面跳转 router.navigate //单一参数: this.router.navigate(['/detail',id]); //多个参数: this.router.navigate(['/d ...
- JSTL-标准标签库
JSTL1.2中的标签库可以分成5类区域 核心:uri="http://java.sun.com/jsp/jstl/core" prefix=“c” XML: ...
- 使用Ansible自动配置Nginx服务
1.首先安装好Ansible环境,具体步骤请见Ansible安装 2.先创建hosts文件(为后面编写脚本安装JDK做铺垫) [root@localhost /]# vi hosts [jdktest ...