Vuex整理

2019独角兽企业重金招聘Python工程师标准>>>

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
    }

转载于:https://my.oschina.net/LinearLawX/blog/891939