vue2.x之vuex介绍(一)

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

状态管理模式

在普通组件中，一般是单向状态管理，也就是下图这种情况

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

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

因此出现了vuex，用来管理多个组件共享状态，如下图所示：

vuex的安装

要想使用vuex, 必须先安装vuex

1. 安装

npm install vuex --save

2. 在main.js引入

import Vuex from 'vuex';
Vue.use(Vuex);

到这一步位置，而且new Vue里面才可以配置store, vm实例和组件实例上都会有$store属性，这样我们才可以使用vuex, 实质是使用$store的dispatch和commit方法。

3. 创建文件

前面两步是全局引入，一般情况下，我们会单独创建store模块，然后再引入到main.js中

⏰ 在src下新建一个文件夹store，里面新建一个index.js

import Vuex from 'vuex';

Vue.use(Vuex);
const state = {

};
const mutations = {

};
const actions = {

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

⏰ 在main.js中引入index.js

import Store from '../src/store/index';
new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

vuex的组成部分

vuex一共有五个部分：state, action, mutation, getter, module

state

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。这个对象就是state.

⏰ 1. 定义

const state = {
  count: 5
}

⏰ 2. 获取状态

Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

computed: {
    count () {
      return store.state.count
    }
}

action

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

const actions = {
  increment (context) {
    context.commit('increment')
  }
};

action只有一个参数：context对象，这个对象与store的方法和属性非常相像。

⏰  分发action

store.dispatch('increment')

mutation

mutation是vuex中唯一一个修改state的方法，本质上也是一个对象，每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler) 。

const mutations = {
  increment(state, n) {
    state.count += n;
  }
};

需要注意的是mutation必须是同步函数

getter

如果需要从 store 中的 state 中派生出一些状态，而且多个组件都会用到这个属性，这时vuex给我们提供了getter，相当于是store的计算属性。

⏰ 1. 定义

const state = {
  count: 5,
  arr: [1, 2, 3, 4, 5, 8]
};
const getters = {
  smallArr(state) {
    return state.filter(item => item < 5);
  }
};

⏰ 2. 获取

store.getters.smallArr

modules

modules即模块化。这里我们就不详细介绍了，会分出一节详细介绍。

vuex的定义

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

Vue.use(Vuex);
const state = {
  count: 5,
  arr: [1, 2, 3, 4, 5, 8]
};
const getters = {
  smallArr(state) {
    return state.filter(item => item < 5);
  }
};
const mutations = {
  increment(state, n) {
    state.count += n;
  }
};
const actions = {
  increment (context) {
    context.commit('increment')
  }
};
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})