【VUEX——详细讲解】

vuex介绍

vuex就像眼镜：您自会知道什么时候需要它。

应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

状态，驱动应用的数据源；
视图，以声明方式将状态映射到视图；
操作，响应在视图上的用户输入导致的状态变化。

官方图片

运行流程图，也只能按照这个流程操作

state

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data

    //全局初始状态
state:{
	  msg:50,
	   userInfo:{},
	   userInfoFlag:false,
	   todos: [
		  { id: 1, text: '...', done: true },
		  { id: 2, text: '...', done: false }
	]
},

getters

过滤数据方法

getters: {
  doneTodos (state) {
    return state.todos.filter(todo => todo.done)
  }
}

mutations

操作数据流转的方法同步

    //修改state的状态值
    mutations:{
        getUserInfoFun(state,payload){
            // console.log(payload)
            state.userInfo = payload.userinfo
            // console.log(payload.userinfo)
            state.userInfoFlag = payload.userInfoFlag
        }
    },

autions

放一些异步请求

    //修改state的值，也可以进行异步操作
    actions:{
        asynGetUserInfoFun(context, paylocd) {
            // console.log(context)
            // console.log(paylocd)
            // getUserInfo()
            // 将数据流转到mutations里面
            context.commit('getUserInfoFun',paylocd)
        }
    },

mudules

命名空间，可以单独开一个空间，空间内存放stota,getters,mutations,actions数据
官方：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。

每一个命名空间都拥有数据，用mudules接收因为可以接受多个所以是个数组。

每天一苹果，医生远离我
An apple a day keeps the doctor away