Vue.js中vuex详解

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。store是vuex的一个实例对象，每个应用仅包含一个store实例对象。下面我们来看一下vuex中的五个核心特性。

1.  State

对象类型，用来存储所有的数据对象。

state: { //用于管理全局的数据
    val: 'hello'
  }

调用state中的数据

<template>
      <div>
        {{$store.state.val}}
        <button @click="change">修改</button>
      </div>
</template>

2.  Mutations

对象类型，用于声明所有直接操作State对象的函数。

所声明的函数有2个参数，  参数1为state对象，参数2为提交当前方法时所传递的参数。

mutations: { //用于直接修改state数据
    changeVal(state,val){ //参数1是state对象，参数2是传递过来的值
      state.val = val
    }
  }

调用Mutations中的方法

change(){

      //commit 用于触发 mutations 中的函数
      this.$store.commit('changeVal', 123)

    }

3.  Actions

对象类型，用法类似于Mutations，不同的是该对象中声明的函数可以用于异步操作。

所声明的函数有2个参数，参数1为context对象（Store对象），参数2为提交当前方法时所传递的参数

actions: { //用于异步操作
    setVal(store,val){ //参数1是Store对象，参数2是传递过来的值
      console.log(store)

      //要修改state数据，必须使用mutations函数
      store.commit('changeVal', val)
    }
  }

在actions中，修改state不要直接修改，例如：store.state.val = val

不规范！！！

必须调用mutation函数。

调用actions

change(){
      
      //dispatch 用于触发 actions 中的函数
      this.$store.dispatch('setVal', 'hello world!')
    }

4.  Getters

对象类型，用于声明一系列的属性，用法类似于computed，也有缓存，当所依赖的state数据发生变化时，会重新计算

// 类似于 computed
getters: { 
    //该方法有缓存，只有所依赖的state数据发生变化才会重新计算
    changeUpper(state){ 
    return state.val.toUpperCase()
    }
  }

Getters中的方法有两个默认参数

• state 当前VueX对象中的状态对象

• getters参数可以访问访问器中的其它访问器函数

访问这些访问器属性时，就像是组件中的计算属性一样调用，而不是像函数调用一样

5.  Modules

对象类型，用于模块化的状态管理。

当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter 。