文档章节

Vuex整理

LinearLaw
 LinearLaw
发布于 2017/05/03 23:14
字数 1194
阅读 58
收藏 0
点赞 0
评论 0

Flux架构

vuex基于flux架构,是一种状态管理的架构理念,和MVC是同一类的东西。
个人理解:当页面元素进行了组件化,各自拥有其私有的data和view,
    当出现了频繁的组件间数据交互,组件之间的数据传递将变成无迹可寻,十分杂乱。
    使用flux架构,flux是单向数据流,
    所有数据改动都流向store,view中的操作都通过dispatch去操作store,有迹可循,便于维护和管理。

vuex是对vue框架的flux架构的一种实现,拥有着state、mutations、actions、getters四部分。

vuex

vuex是一个状态管理器,可以提供给组件一个共同的状态。

个人理解,如果多个组件他们共同需要改变同一套的数据data,可以给他们设置一个共同的状态管理,即一个共通的store文件来保存这些共通的数据,并提供能够访问更改其数据的方法。

##    vuex安装
   npm install vuex --save

vuex使用

定义store.js,作为组件之间的的共通数据容器。

Vuex分成四个参数。
1、state:组件共享状态的数据。
2、mutations:写有操作state数据的方法,直接对state操作,都为同步操作。
3、actions:将数据提交给mutations,可以为异步操作。
4、getters:处理state数据并将数据往外提供。

State

组件可以通过this.$store.state.xxx访问state的值。	

Mutations

Mutations用于操作state的数据。其内部操作必须都为同步操作。
在组件中,直接触发Mutations里的方法,
		this.$store.commit('mutationName')
eg:
	export default {
	  methods: {
	    handleClick() {
	      this.$store.commit('mutationName')
	    }
	  }
	}

或者利用辅助函数mapMutations,
    在这里,'mutationName'等同于:this.mutationName:this.$store.state.mutationName
eg:
	import {mapMutations} from 'vuex'

	//我是一个组件
	export default {
	  methods: mapMutations([
	    'mutationName'
	  ])
	}

Actions

Actions用于触发Mutations的方法,其内部操作可以是异步操作。
在组件中,直接触发Actions里的方法,
		this.$store.dispatch('actionName')
eg:
	actionName({ commit }) {
	    //dosomething
	    commit('mutationName')
	  }

或者利用辅助函数mapActions。
eg:
	import {mapActions} from 'vuex'

	//我是一个组件
	export default {
	  methods: mapActions([
	    'actionName',
	  ])
	}

Getters

Getters用来集中处理state的数据,并向外提供。
在store中,
    const getters={
        getMsg(state){
            console.log(state.msg)
        },
        /**
         * getter,要向外提供state的处理后的数据,return这个计算值;
         */
        getDoubleCount(state){
            return state.count * 2
        }

在组件中,触发getters里面的方法,
		this.$store.getters.valueName

利用辅助函数mapGetters。
eg:
	import {mapGetters} from 'vuex'

	//我是一个组件
	export default {
	  computed: mapGetters([
	    'strLength'
	  ])
	}

组件传值

在组件中,将数据提交给actions中的方法,并传入一个outerdata。
在组件中:
	eg:
		sbt:function(obj){
                this.$store.dispatch('saveMsg',obj);
                alert("Successful!");
                return false;
            }

	tips:dispatch调用了actions中的方法,obj是传入到actions里saveMsg的参数。

在store中:
	eg:
	const state={
		    msg:[]
		}
		/**
		 * [@desc](https://my.oschina.net/u/2009802) 外界要传值给store,则调用actions里的方法
		 */
		const actions={
		    // 外界传来的值将其保存到outerData这个变量中,提交给mutations进一步处理
		    saveMsg({commit},outerData){
		        commit('mutaSave',outerData)
		    },
		    initMsg(){
		        commit('initMsg')
		    }
		}
		/**
		 * [@desc](https://my.oschina.net/u/2009802) mutations直接对state里面的数据进行操作
		 */
		const mutations={
		    mutaSave(state,outerData){
		        state.msg.push(outerData);
		    },
		    initMsg(){
		        state.msg = [];
		    }
		}

	tips:saveMsg({commit},outerData)将数据提交给mutations,由mutations对state的数据进行更改。

动态更新

当state中的数值更新的时候,将其导入到页面的数据中,
使用computed属性。
	eg:
		const store = new Vuex.Store({
			state:{
				count: 0
			}
		})
		const app = new Vue({
			store,
			computed:function(){
				count:function(){
					return this.$store.state.count
				}
			}
		})

辅助函数

一个组件需要获取多个状态,可以使用map辅助函数来进行,减少重复代码。

mapState

import {mapState} from 'vuex'
export default{
	computed: mapState({
		count: state => state.count,
		countAlias: 'count',		//这句相当于'state=>state.count'

		//如果希望使用this来获取局部的状态就要用常规的函数
		countPlusLocalState (state){
			return state.count + this.localCount
		}
	})
}

mapState返回的是一个对象,例如上面例子返回的便是一个对象,
	{
		count:state.count
	}
对象中的内容过多需要使用一个工具函数将其提取,可以使用对象展开运算符实现自动展开的操作。

	eg:
		computed:{
			localComputed()
			...mapState({
				count:state=>state.count
			})
		}

mapMutations

import {mapMutations} from 'vuex'
export default {
    data(){
        return{

        }
    },
    methods:{
        //将mutations里面的方法导入到methods中
        ...mapMutations(["mutationsMethods"]),
        changeCount(){

        }
    }
    mounted(){
        //在钩子函数mounted中,可以调用mapMutations里导入过的方法
        //并且,可以往里传入值,这里传了一个data
        this.mutationsMethods(data)
    }
}

模块化vuex

    先看一下普通的vuex引用方式:
        state.js
            module.exports = {
                service:[],
                navinfo:[]
            }   

        index.js
            import state from './state'
            export default new Vuex.Store({
                  actions,    //共用的actions
                  getters,    //共用的getters
                  mutations,
                  state
             })

    state直接是一个对象进行引入,如果组件比较多,那么就可以进行模块化引入

    import * as actions from './actions'
    import cart from './modules/cart'
    export default new Vuex.Store({
         actions,
        modules: {
            cart,
        }
    }


    而在cart模块当中,写入四个值即可,
    这里需要用到type来规划模块里面的actions/state/mutations的名字

    export default {
        state,
        getters,
        actions,
        mutations
    }

© 著作权归作者所有

共有 人打赏支持
LinearLaw
粉丝 4
博文 30
码字总数 36311
作品 0
深圳
个人站长
真正掌握vuex的使用方法(一)

导语:vuex是什么?我的理解就是vuex是一个管理者,管理的方式是集中式管理,管理的对象即是vue.js应用程序中的众多组件的共享部分。学习的过程当中,希望按照我的步骤一步一步来进行练习! ...

张培跃 ⋅ 05/17 ⋅ 0

真正掌握vuex的使用方法(二)

从上篇文章当中相信大家已经对vuex有了一些大概了解了,接下来咱们结合实例来继续敲代码吧!切记一定要动手实操练习一遍! 接下来咱们来完成一个超级简单的投票功能!要求很简单,点击“投票...

张培跃 ⋅ 05/17 ⋅ 0

真正掌握vuex的使用方法(七)----完结

今天是关于vuex的最后一篇文章了!怎么说呢?且行且珍惜吧!!认真尝试每一行代码! 之前的文章当中,我们把所有的数据都存放到了 vuex文件夹当中的store.js当中。但随着将来项目的复杂度增大...

张培跃 ⋅ 05/27 ⋅ 0

[译]为什么 VueX 是前端与 API 之间的完美接口

原文地址:Why VueX Is The Perfect Interface Between Frontend and API 原文作者:KBall 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:zhmhhu 校对者:sunui, Te...

zhmhhu ⋅ 06/04 ⋅ 0

Vue进阶(四):使用 Vuex + axios 发送请求

Vue进阶(四):使用 Vuex + axios 发送请求 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。 目前主流的 Vue 项目,都选择...

sunhuaqiang1 ⋅ 05/05 ⋅ 0

vuex实现路由切换动画同时嵌套路由同样使用

示例 http://47.94.90.89/dist/#/aaa 一、安装vue-cli 1 下载安装node.js 2 npm install -g cnpm --registry=https://registry.npm.taobao.org 换源 3 cnpm install -g vue-cli 全局安装vue......

任倩坤 ⋅ 05/18 ⋅ 0

vuex其实超简单,喝完这3步,还有3步

上一篇 vuex其实超简单,只需3步 简单介绍了vuex的3步入门,不过为了初学者容易消化,我削减了很多内容,这一节,就是把少掉的内容补上, 如果你没看过上篇,请戳链接过去先看一下再回来,否则,你会觉...

Noahlam ⋅ 05/21 ⋅ 0

大型Vuex应用程序的目录结构

译者按: 听前端大佬聊聊Vuex大型项目架构的经验 原文: Large-scale Vuex application structures 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译...

Fundebug ⋅ 06/13 ⋅ 0

Vue进阶(五):与 Vuex 的第一次接触

Vue进阶(五):与 Vuex 的第一次接触 在 Vue.js 的项目中,如果项目结构简单,父子组件之间的数据传递可以使用 props 或者 $emit 等方式 (详参博文《Vue进阶(六):组件之间的数据传递》)...

sunhuaqiang1 ⋅ 05/05 ⋅ 0

Step-by-step,打造属于自己的 Vue SSR

编者按:本文由 玩弄心里的鬼 发表于掘金,已授权奇舞周刊转载 笔者最近在和小伙伴对vue项目进行ssr的升级,本文笔者将根据一个简单拿vue cli构建的客户端渲染的demo一步一步的教大家打造自己...

奇舞周刊 ⋅ 04/17 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Cube、Cuboid 和 Cube Segment

1.Cube (或Data Cube),即数据立方体,是一种常用于数据分析与索引的技术;它可以对原始数据建立多维度索引。通过 Cube 对数据进行分析,可以大大加快数据的查询效率 2.Cuboid 在 Kylin 中特...

无精疯 ⋅ 38分钟前 ⋅ 0

github太慢

1:用浏览器访问 IPAddress.com or http://tool.chinaz.com 使用 IP Lookup 工具获得github.com和github.global.ssl.fastly.net域名的ip地址 2:/etc/hosts文件中添加如下格式(IP最好自己查一...

whoisliang ⋅ 40分钟前 ⋅ 0

非阻塞同步之 CAS

为解决线程安全问题,互斥同步相当于以时间换空间。多线程情况下,只有一个线程可以访问同步代码。这种同步也叫阻塞同步(Blocking Synchronization). 这种同步属于一种悲观并发策略。认为只...

长安一梦 ⋅ 51分钟前 ⋅ 0

云计算的选择悖论如何对待?

人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云计算为...

linux-tao ⋅ 53分钟前 ⋅ 0

我的第一篇个人博客

虽然这是个技术博客,但是,我总是想写一些自己的东西,所有就大胆的在这里写下了第一篇非技术博客。技术博客也很久没有更新,个人原因。 以后自己打算在这里写一些非技术博客,可能个人观点...

Mrs_CoCo ⋅ 54分钟前 ⋅ 0

Redis 注册为 Windows 服务

Redis 注册为 Windows 服务 redis 注册为 windows 服务相关命令 注册服务 redis-server.exe –service-install redis.windows.conf 删除服务 redis-server –service-uninstall 启动服务 re......

Os_yxguang ⋅ 54分钟前 ⋅ 0

世界那么大,语言那么多,为什么选择Micropython,它的优势在哪?

最近国内MicroPython风靡程序界,是什么原因导致它这么火呢?是因为他功能强大,遵循Mit协议开源么? 错!因为使用它真的是太舒服了!!! Micropython的由来,这得益于Damien George这位伟大...

bodasisiter ⋅ 58分钟前 ⋅ 0

docker 清理总结

杀死所有正在运行的容器 docker kill $(docker ps -a -q) 删除所有已经停止的容器(docker rm没有加-f参数,运行中的容器不会删掉) docker rm $(docker ps -a -q) 删除所有未打 dangling 标...

vvx1024 ⋅ 今天 ⋅ 0

关于学习

以前学车的时候,教练说了这样的一句话:如果一个人坐在车上一直学,一直学,反而不如大家轮流着学。因为一个人一直学,就没有给自己留空间来反思和改进。而轮流着学的时候大家下来之后思考上...

mskk ⋅ 今天 ⋅ 0

压缩工具之gzip-bzip2-xz

win下常见压缩工具:rar zip 7z linux下常见压缩工具:zip gz bz2 xz tar.gz tar.bz2 tar.xz gzip 不支持目录压缩 gzip 1.txt #压缩。执行后1.txt消失,生成1.txt.gz压缩文件 gzip -d 1.txt....

ZHENG-JY ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部