Vuex笔记
Vuex笔记
LinearLaw 发表于7个月前
Vuex笔记
  • 发表于 7个月前
  • 阅读 43
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

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
			})
		}

——待更新

标签: Vue.js
共有 人打赏支持
粉丝 4
博文 21
码字总数 29638
×
LinearLaw
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: