Vuex的基础使用

1、什么是Vuex?

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

2、Vuex与全局对象的区别

Vuex的核心是仓库，包含你应用中大部分的状态，它与单独的全局对象有以下两点区别：
（1）vuex状态存储是响应式的，当store中的状态发生改变时，相应的组件也会得到高效的更新。
（2）你不能直接改变store中的状态，只能通过显式的提交（commit）mutation。

3、Vuex的使用场景？

vue组件开发过程中，经常会遇到组件间的状态传递。当需要进行通信的双方既不是父子关系，又不是兄弟关系时，或者同样的状态需要共享到多个组件使用，数据的传递就会变的特别麻烦，而使用Vuex这时候就会特别方便（如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。）

4、Vuex的使用？

(1)vur-cli安装vuex

npm install vuex --save

(2)src目录下创建store目录，并在目录下创建index.js

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

const state = {
  token: '',
};

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token;
  },
};
const actions = {};
const getters = {};

Vue.use(Vuex);

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

#使用常量替代 Mutation 事件类型，可以让你的代码合作者对整个 app 包含的 mutation 一目了然（在store目录下新建一个types.js）

//types.js
		
export const SET_TOKEN = 'SET_TOKEN';

(3)在根节点注入store(全局注入，在main.js里面引入store)

import store from './store';
		
new Vue({
	  el: '#app',
	  components: { App },
	  template: '<App/>',
	  store
	});

（4）使用：
你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，eg:

this.$store.commit('SET_TOKEN ', this.token);

你可以通过 this.$store.state.xxx 来获取状态对象, eg:

this.$store.state.token