如何使用vuex

官方文档是这样介绍Vuex的，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。在我理解，简单的白话来说，就是管理(读/写)各个页面或者各个组件都需要使用的数据。

github站点: https://github.com/vuejs/vuex

在线文档: https://vuex.vuejs.org/zh-cn/

安装Vuex：npm install vuex --save

下面我们先来了解Vuex的核心概念：

1.state

vuex管理的状态对象，它应该是唯一的，类似于vue中的data，用于初始化数据

2.mutation

包含多个直接更新state的方法(回调函数)的对象，通过action中的commit('mutation名称')，只能包含同步的代码, 不能写异步代码

3.action

包含多个事件回调函数的对象，可以处理异步，通过组件中$store.dispatch('action名称')触发，不能直接修改state，首先在组件中通过dispatch触发action，然后在action函数内部commit触发mutation，通过mutation修改state状态值

4.getters

包含多个计算属性(get)的对象，相当于vue中的computed,依赖于state状态值，状态值一旦改变，getter会重新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要使用getter

5.modules

包含多个module，一个module是一个store的配置对象，与一个组件(包含有共享数据)对应

具体使用方法：

一、store/index.js 初始化

// 导入vue及vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 挂载vuex
Vue.use(Vuex)

// 创建vuex对象并向外暴露
export default new Vuex.Store({
  // 全局属性变量
  state: {
  },
  // 全局同步方法, 调用方法,this.$store.commit("xxx")
  mutations: {
  },
  // 异步方法 调用方法,this.$store.dispatch("xxx")
  actions: {
  },
  // Vuex属性计算,在视图里面当变量使用
  getters: {
  },
  // 模块化注册
  modules: {
  }
})

二、src/main.js 注入store

法一：

// 导入
import store from './store/index.js'
// 挂载到Vue实力上，全局可通过this.$store进行调用
Vue.prototype.$store = store

法二

import store from './store.js'
new Vue({
	store
})

三、设置state初始值（store/index.js）

state: {
    data:0
  },

四、组件内获取state

this.$store.state.data

五、直接通过mutations修改state

1.store/index.js

给mutations添加方法

mutations: {
    changeDataByMutations(state, params) {
      state.data = params
    }
  }

2.组件内触发mutations方法

<button @click='changeDataByMut'>通过mutation改数据</button>

methods:{
      changeDataByMut:function(){
        // 通过commit 触发 mutation 并传参
        this.$store.commit('changeDataByMutations', 10) //此时组件1和组件2中data都是10啦
      }
    }

六、通过action修改state

1.store/index.js

给action添加方法

actions: {
    changeDataByAction(context, params) { //context是一个对象，从它里面把咱们需要的commit方法解构出来
      let {commit} = context
      commit('changeDataByMutations', params)
    }
  }

2.组件内触发action方法

<button @click='changeDataByAct'>通过action改数据</button>

methods: {
      changeDataByAct: function() {
        // 通过dispatch 触发 action 并传参
        this.$store.dispatch('changeDataByAction', 100) //此时data就变成100啦，并且组件1和组件2是同步的
      }
    }

七、getter的使用

1.store/index.js

getters: {
    doubleGet(state) {
      return state.data * 2
    }
  }

2.组件内获取getter计算的值

this.$store.getters.doubleGet

下附图片两张，以供参考。

vuex思维导图

vuex流程图