Vuex理解、安装、及使用

---

一、什么是Vuex？

Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
原先数据需要保存到各自vue事例对象的data中，使用Vuex之后，就可以把data中的数据集中管理到vuex中。

二、核心概念

• state           状态(data)
• mutation     突变（修改data的唯一方法）
• action         动作（封装异步代码，然后调用mutation的方法，从而改变state值）
• getters        获取（对数据获取之前的再次编译，可以理解为 state 的计算属性）
• modules     模块化Vuex

三、Vuex安装

npm install vuex

四、使用步骤

1.实例化

代码如下（示例）：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
})

2.集成到vue中（在main.js中）

代码如下（示例）：

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.调用

//调用state数据
this.$store.state.data;
//调用mutations方法
this.$store.commit('需要触发的Mutation函数','传递的参数')
//调用actions
this.$store.dispatch('需要触发的action函数',需要传递的参数)
//调用getters
this.$store.getters.xxx;

---

补充：

通过在根实例中注册store选项，该store实例会注入到根组件的所有子组件中，且能通过this.$store访问到。