vuex介绍、安装、使用，vue项目中使用vuex

1、vuex能做什么，有什么用，什么时候用

1.1vuex是做什么的

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
类似于我们在jquery或原生项目中的将某些会在各个页面用到的数据储存到全局变量window中（比如token）但是多了就i不好管理。
vuex则是以一个全局单例模式管理，通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

1.2什么样的情况用

1.2.1 多个视图依赖于同一状态

当某个数据需要多层传递时，以下图为例，是某个设备再某条线上的图片文件夹列表，打开后是某个设备的图片文件夹列表，再打开才是塔的图片文件夹列表，然后再点开才是基于某个设备某个塔的图片列表，最后一层才是具体的图片，一共是四个组件。而所有的数据全部在第一个页面获取的，这时候图片数据需要一层层传递，十分繁琐。
而这种情况还是在父子组件的情况下，如果是兄弟组件，则需要使用vue bus来进行管理，更加复杂了。

1.2.2 来自不同视图的行为需要变更同一状态

2、安装vuex

NPM安装命令

npm install vuex --save

安装成功后在package.json文件中可以找到

  "dependencies": {
    "vuex": "^3.1.0"
  },

或者也可以在该文件中先配置好上面的代码片段，然后运行下面的命令安装所有依赖

npm install

3、引入项目中

3.1、项目结构一览

这是我的vue项目结构，vuex配置文件全部放到store中，main.js中引入配置文件，要配置vuex的就这两个文件。

3.2、main.js所需代码

import Vue from 'vue'
import App from './App'
import store from './store/index.js'

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

3.3、vuex配置文件

store文件夹结构

index.js文件代码

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
  }
})

export default store;

4、调用和改变储存在vuex中的数据

index.js文件

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: { // vuex中储存的数据全部存在这
    isLogin: false, // 登陆是否成功
  },
  getters: { // 通过getters方法调用vuex中数据的方法放在这
    getLineDeviceList: state => {
      return state.isLogin;
    }
  },
  mutations: { // 修改vuex中数据的方法放在这
  	updateIsLogin (state, num) {
      state.isLogin = num;
    },
    updateIsLoginObject (state, payload) {
      state.isLogin = payload.isLogin;
    },
	setIsLoginTrue (state) {
      state.isLogin = true;
    },
  }
})

export default store;

4.1、获取vuex中的数据

4.1.1、计算属性computed中获取

computed: {
  isLogin () {
    return this.$store.state.isLogin;
  }
}

4.1.2、getters方法获取

mounted: function () {
	let isLogin = this.$store.getters.isLogin;
},

4.2、改变vuex中储存的数据

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
只能通过mutations中的方法来改变，而不能直接改变。
这种写法不行

this.$store.state.isLogin = true

正确的写法

mounted: function () {
	// 传基础数据类型，如数字，改变为10
	store.commit('updateIsLogin', 10);  
	// 传对象，改变为false
	store.commit('updateIsLogin', {isLogin: false});  
	// 不传参数，改变为false
	store.commit('setIsLoginTrue'); 
},