vueX 的核心

vueX

​ VueX 第一印象就是用来管理全局的用户信息 ，避免父子之间的频繁通信。

1. vueX 的核心

1.1 state: 用于存储变量状态 ==》使用this.$store.state 调用 state 下存储的常量数据。

1.2 getters：对state 进行计算，类似于computed(),可以在getters中设定方法，可以看接下来列子。

1.3 mutations：设置方法函数，通俗来说，就是对于state值得修改，并且只能通过mutations进行修改。注意：mutations不能有异步处理，因为有异步处理程序会很调试，devtooles也会很难追踪到状态

1.4 actions ：和mutations不同 actions 进行异步处理，action 可以用来执行 mutations 方法对state进行修改，$store.commit(‘mutation方法名’,…方法得带参)

1.5 modules ：模块化vueX ，因为state数据量可能很大，会有不同得分类，可以将不同的state分为不同的模块进行管理，可以更加直观，更加方便。

2.核心的基本实现

1.1 state

export default new vuex.Store({
    state:{
        show:true,
        name:'name',
        //可以在state中 存放对象数据 
        code:{
            name:'小明'
        }
    },
    getters:{
        getName(state){
            return state.name
        }
    }
})

​ vue模块怎样获取state信息，以name为例：

// 创建name对象  将state中的 name 赋值给对象name
this.name=this.$store.state.name
this.codeName =this.$store.state.code.name //获取对象信息

1.2 getters

// 创建getters方法  可以通过方法获取state信息 
getters:{
        getName(state){
            return state.name
        }
    }

​ 模块调用方法：

//  通过get方法获取name信息
this.name=     this.$store.getters.getName

1.3mutations 和action

mutations:{
      update(state,n){
        state.num+= n;
      }
  }

// 通过commit 直接执行 mutations方法
this.$store.commit("update",10);
 this.show=this.$store.state.num

//调用 action 执行 mutations 的增加方法
  this.$store.dispatch('update',1110);
  this.show=this.$store.state.num

​ 4.modules

const login ={
    state :{
        name:'小明'
    }
}

 modules:{
        login: login
    }

//需要加上模块的名称  login
this.show=     this.$store.state.login.name

在实现以上功能的时候尽量将不同的 功能放在不同的js下进行区分。