Vue之状态管理（Vuex）

前言
        今天说一下Vuex的状态管理，自我感觉像他像是JAVA的static，全局可以调用，且独一份，这里说的独一份指的是在读取数据时，如果某个页面对该数据做了修改，那么其他页面就会读取到修改之后的值。每个vue页面均可调用Vuex里的属性和函数。

        概念

                vuex的五个重要概念：
                        1、state：作用是像是声明一个全局变量，可以供所有vue使用的一个属性。仅有一份，如果在一个vue里改变属性值，                 另一个vue里可以获取到改变后的值。
                        2、getters：优美的获取state的变量，其作用是获取state的值，但是还有一个重要的作用，缓存效果：若第二次调用                 getters，无需执行getters里的函数。
                        3、mutations：作用是修改state值，一般情况下不会直接修改。
                        4、actions：作用是辅助mutations修改state值，此时需要actions提交mutations的方法，可以传参。
                        5、modules：作用：将store分模块管理，每个模块拥有独立的state、getters、mutations、actions、modules。
        总结：

• state：全局变量
• getters：获取变量
• mutations：修改变量（建议不要直接做修改）
• actions：辅助mutations间接修改变量
• modules：分模块管理

准备工作

        一、安装：
                终端：npm install vuex
        二、配置：
                打开main.js添加如下配置：
                1、引入
                2、vue使用vuex
                3、导出

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

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

Vuex的文件夹

        一般情况下，在创建vue项目时勾选vuex时会自动配置vuex，只需要使用即可，目录如下图：

• index.js

import Vue from "vue";
import Vuex from "vuex";
import homes from './module/home'

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {//分模块儿管理
    homes
  }
});

• home.js

const state={
  user:'',//记录用户
}

const getters={
  getUser(state){//获取
    return state.user;
  },
}

const mutations={//直接修改，不提倡
  setUser(state,user){
    state.user=user
  },
}

const actions={//间接修改
  takeUser({commit},user){
    commit("setUser",user)
  }，
  //或者
  takeUser1(conext,user){
	conext.commit("setUser",user)
  }
}

export  default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

基本使用方法

        使用方法：
                1、利用辅助函数调用
                2、直接调用

辅助函数

        mapGetters：获取state的值
        mapActions：调用vuex里的修改state的函数
        一般情况下，这两个辅助函数最常用，也有mapState，mapMutations，但是根据vuex的规则，state不可以直接获取和修改。所以不是很适用。

import {mapGetters，mapActions} from 'vuex'

export default{
	name:'',
	computed:{
		...mapGetters('home',['getUser']),
		//还可以这样写
		//...mapGetters('home',{user:'getUser'}),
		//使用时正常使用。如获取user的值：this.getUser或this.User
	},
	methods:{
		...mapActions('home',['takeUser']),
		//还可以这样写
		//...mapActions('home',{changeUser:'takeUser'}),
		//使用时，正常调用即可，如，要改变值，this.getUser()或this.changeUser()可传参
	}
}

直接调用

        也可以直接调用vuex的属性和函数，如下：

export default{
	name:'',
	computed:{
		user(){
			//或者：this.$store.getters['home/getUser']
			//home：module类型
			//getUser：home里的getUser获取state的方法
			return this.$store.state.home.user;
		}
	},
	
}

        注意：在给actions传参时，只能传一个，如果像传多个值，那就将值写到一个对象里，如下：

export default{
	methods:{
		let results={
			user:this.user,
			course:this.course
		};
		this.$store.actions.home.tabkeUser(results);
		
	}
}