文档章节

Vuex整理

LinearLaw
 LinearLaw
发布于 2017/05/03 23:14
字数 1194
阅读 98
收藏 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
博文 33
码字总数 39273
作品 0
深圳
个人站长
真正掌握vuex的使用方法(一)

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

张培跃
05/17
0
0
vuex组件 vuex-persistedstate

vuex用于管理项目中的全局状态,但是我们一刷新vuex中保存的全局状态就会被全部初始化,虽然我们也可以同事缓存到storage中做两步操作,但是vuex-persistedstate组件已经帮我们完成了同步更新...

donggggg
05/28
0
0
Vuex持久化插件-解决刷新数据消失的问题

vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的。怎么解决呢,我们可以结合本地存储做到数据持久化,也可以通过插件-vuex-persistedstate。 欢迎来点点我的个...

hollyDysania
08/02
0
0
理解vuex -- vue的状态管理模式

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

wenxingjun
07/25
0
0
真正掌握vuex的使用方法(二)

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

张培跃
05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

angular指令监听ng-repeat渲染完成后执行自定义事件方法

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令。 在ng-repeat模板实例内部会暴露出一些特殊属...

孟飞阳
36分钟前
1
0
URLEncoder和URLDecoder

public static void main(String[] args) { String str1 = "https://test1-life.pingan.com/ilifecore/productMall/loading.html?productId=8000000241&channelCode=XCX00001&productCode=00......

鬼才王
46分钟前
2
0
对象及变量的并发访问-第一篇

方法内部的变量为线程安全变量 “非线程安全”问题存在于“共享变量”中,如果是方法内部的私有变量,则不存在“非线程安全”问题,所得结果也就是“线程安全”的。 package chaprer3;/**...

简心
47分钟前
1
0
程序媛眼中的程序猿原来是这样子的!

一直都想写一篇关于描述程序员的文章,但是一直没能开头,一来因为文笔不好,更主要的原因是貌似对程序员既熟悉又不熟悉,很怕写出来的是以偏概全,给大家造成对程序员的既定印象,不过,管他...

Java小铺
今天
1
0
bean标签

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 bean标签 bean标签中的init-method属性,该属性...

凯哥学堂
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部