vuex[一文整理vuex的常规使用]

官方地址：https://vuex.vuejs.org/zh/

认识vuex

官方的正式说明我就不多说了，反正我个人的理解是，vuex像是一个全局的变量对象，一旦设置vuex的state数据变量后就可以在项目中任意的组件内共享该变量状态，想获取数据就获取，想改变它就改变。
比如：登录完成后将登录信息存在vuex的state中，然后你可以在任何组件中都通过$store.state.xx的方式获取登录信息

基本使用

首先是安装：

npm install vuex --save

如何引入：

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

项目配置
一般情况下，项目中都会存在一个文件store.js(名字各异)专门管理vuex，这个文件中必定会引入以上的三条内容，并且导出一个Vuex实例对象，且该文件必定会在main.js中引入并且注册在new Vue({})中

main.js文件中：

注意：
1.之后项目中所有的状态管理内容都是由store.js这个文件进行管理
如：比如我要在axios.js中引入store并且触发数据改变

import store from './store.js';   
.....
store.commit('xx',data)  // commit触发mutation事件，第一个参数xx是事件名称，data是传递的数据

认识vuex的五个基本内容

state

state是专门用来存放数据的地方，可以在这里面定义存储数据的变量(变量名可以自定义)如：

export default new Vuex.Store({
  state: {
    userInfo: {} // 存储用户信息
  },
  mutations: {
  },
  actions: {},
  getters: {},
  modules:{}
});

mutations

要改变state中的数据，vuex建议的是在mutations中定义相关的事件，然后通过该事件的传递参数来改变state中的数据

export default new Vuex.Store({
  state: {
    userInfo: {} // 存储用户信息
  },
  mutations: {
    setUserInfo(state,data){ // 改变用户信息
      state.userInfo = data;
    }
  },
  actions: {},
  getters: {},
  modules:{}
});

认识mutations 中的事件，首先该事件默认有两个参数，第一个参数传递state变量，可以通过state.xx的形式访问到state中定义的变量，第二个参数传递的是改变的数值。
触发mutations事件的方式：this.$store.commit(‘setUserInfo’,‘传递的内容’);
commit()方法属于vuex中的默认方法,专为触发mutations的事件而使用，传递的第一个参数为事件名(setUserInfo)，第二个参数为传递的数值。

Actions

Action也是为了改变数据而存在的，不过相对于Mutations它多了一些操作。如：Action改变数据的方式是通过提交Mutations来改变而不是直接改变， 因此多个提交操作的时候可以建立一个action来提交改变。Action还可以包含任意异步操作。

export default new Vuex.Store({
  state: {
    userInfo: {}, // 存储用户信息
    isLogin: false  // 用户登录状态
  },
  mutations: {
    setUserInfo(state,data){ // 改变用户信息
      state.userInfo = data;
    },
    setLogin(state,data){ // 改变登录状态
      state.userInfo = data;
    }
  },
  actions: {
    checkUser(context,data){ // 通过接口获取用户信息并且改变登录状态,传递过来的参数是data
      axios.post('xx/xx',{data:data},res=>{ //调用接口
        context.commit('setLogin',true);  // 改变登录状态
        context.commit('setUserInfo',res); // 改变用户信息
      });
    }
  },
  getters: {},
  modules:{}
});

认识action中的事件，首先该事件默认有两个参数，
第一个参数传递context变量对象：可以通过context.commit()触发mutations中的事件，或者通过context.state.xx获取state中的变量数值。
第二个参数传递的是给checkUser方法的参数数值。
触发action事件的方式：this.$store.dispatch(‘checkUser’,‘123’);
dispatch()方法属于vuex中的默认方法,专为触发action的事件而使用

Getters

getter的作用就是对state中的数据进行进一步处理然后获取到处理后的数据。比如：获取state中的userInfo中的userName字段，并且给其添加Hello内容

export default new Vuex.Store({
  state: {
    userInfo: {}, // 存储用户信息
    isLogin: false  // 用户登录状态
  },
  mutations: {
    setUserInfo(state,data){ // 改变用户信息
      state.userInfo = data;
    },
    setLogin(state,data){ // 改变登录状态
      state.userInfo = data;
    }
  },
  actions: {
    checkUser(context,data){ // 通过接口获取用户信息并且改变登录状态,传递过来的参数是data
      axios.post('xx/xx',{data:data},res=>{ //调用接口
        context.commit('setLogin',true); // 改变登录状态
        context.commit('setUserInfo',res); // 改变用户信息
      });
    }
  },
  getters: {
    getUserName(state){ // 获取userinfo中的username字段并且添加hello
      return 'hello' + state.userInfo.userName;
    }
  },
  modules:{}
});

认识getter中的事件，首先该事件有两个参数，第二个参数可选
第一个参数传递state变量对象，可以访问state中的变量数据。
第二个参数可选，为getters,可以访问getters中的其他getters事件。
getters可以理解为state的计算属性
给getters传参：通过让 getter 返回一个函数，来实现给 getter 传参如：

getters: {
  getTodoById: (state) => (id) => {
    return state.userInfo.id === id   //id即为传递的参数
  }
}

触发方式

store.getters.getTodoById(2) 

Modules

Module实际上就是vuex模块化，直接看图
store.js中引入

index-store中内容

admin-store.js中内容

咋看之下，子模块其实和父模块是差不多的内容，只是管理的时候分开了文件而已

获取数据的方式

之前的五个基本内容讲述了vuex的数据配置方式，接下来是组件中的数据获取。
获取state中的数据：两种方式
1.在computed中定义某个变量，然后返回某个state中的值即可

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

2.使用mapState辅助函数获取（computed中）
import { mapState } from ‘vuex’
computed:{
…mapState(['userInfo ']) // 使用对象展开运算符将此对象混入到外部对象中并且获取userInfo。注意是：映射 this.userInfo 为 store.state.userInfo
}
获取getters中的数据：两种方式
1.在computed中定义某个变量，然后返回某个getters中的方法即可

 computed: {
  getTodoById() {
    return this.$store.getters.getTodoById
  }
}

2.使用mapGetters辅助函数获取（computed中）
import { mapGetters } from ‘vuex’

computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'getTodoById',
    ])
  }

获取的两种方式都是在computed中设置变量并且返回获取的，并不是说不能直接通过this.$ store.state.xx或者this.$ store.getters.xx来获取，而是通过computed获取可以保证数据之间的联动,即当内容改变时候,对应的就会进行内容更新。

辅助函数的使用

Vuex里面有四个辅助函数对应了四种数据获取和改变的方式
mapState
mapGetters
mapMutations
mapActions
使用方式如下
import { mapState,mapGetters,mapMutations,mapActions } from ‘vuex’
computed:{
…mapState[‘userInfo’]
…mapGetters[‘getUserName’]
}
methods:{
…mapMutations[‘setUserInfo’]
…mapActions[‘checkUser’]
}
引入完成之后可以直接通过this.xx的方式调用。即：this.userInfo === this.$store.state.userInfo
注意同名问题。辅助函数可以修改导出的名字。如：

mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})