1-Vuex概述

1.1-Vuex是什么

Vuex是实现组件全局状态即数据管理的一种机制，能够方便地实现组件之间数据的共享。不需要像Vue一样需要层层传递数据，提高开发效率。

1.2-Vuex的优点

能够在Vuex中集中管理共享的数据，易于开发和后期维护
能够高效地实现组件之间的数据共享，提高开发效率
存储在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步

1.3-什么样的数据适合存放在Vuex中？

一般情况下，需要在多个组件之间进行共享的数据适合存放在Vuex中，而某个组件私有的数据内容更适合于放在组件的data中。

2-Vuex的安装步骤

安装Vuex依赖包

npm install vuex --save

// 安装 Vuex，可能会出现报错，这时就需要修改 Vuex 的版本
// npm install [email protected] --save

在新建的store文件中导入Vue和Vuex，并使用use将Vuex安装成Vue的插件
```
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
```

创建一个store实例对象，用于数据的存储和操作，然后导出

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {},
  actions: {},
});

export default store;

在入口文件中进行store的导入并使用

import store from "@/store/store.js";

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

3-Vuex的核心概念

3.1-State

State的作用： State用于提供唯一的公共数据，所有的共享数据都要统一地放到Store的State中进行存储。

State在Store中的书写方式：

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

组件访问State中数据的两种方式：

// 方法一：直接通过使用$store进行使用
// this.$store.state.全局数据名称

this.$store.state.count



// 方法二：按需导入mapState函数
// 1. 从Vuex中按需导入mapState函数
import { mapState } from "vuex";

// 2. 将当前组件需要的全局数据映射为组件的computed的计算属性
computed: {
  ...mapState(["count"])
},

// 3. 通过this.count进行使用，在template模板中this可以省略

3.2-Mutation

Mutation的作用： Mutation用于变更Store中的数据。
Mutation的注意点：
1. 只能通过mutation变更Store中的数据，不能直接操作Store中的数据
2. 通过这种方式操作数据稍微繁琐一点，但是能够集中监控所有数据的变化
3. Mutation中不能进行异步操作

Mutation在Store中的书写方式：

const store = new Vuex.Store({
	state: {
		count: 0,
  	},
  	mutations: {
  		// 只传入单个参数的书写方法：
	    add(state) {
		  state.count++;
	   },

		// 传入多个参数的书写方法：
		addN(state, step) {
  			state.count += step;
	   	},
	 },
})

Mutation使用的两种方式：

// 方法一：直接通过使用$store的commit进行使用	
methods: {
	// 只传入单个参数的使用方法：
	handleAdd(){
		this.$store.commit('add');
	}

	// 传入多个参数的使用方法：
	handleAddN() {
  		this.$store.commit("addN", 2);
	},
}



// 方法二：按需导入mapMutations函数
// 1. 从Vuex中按需导入mapMutations函数
import { mapMutations } from "vuex";

// 2. 将要使用的函数方法通过 mapMutations 变成组件的 methods 中的方法来使用
methods: {
  ...mapMutations(["add", "addN"]),
},

// 3. 通过this进行使用
methods: {
  ...mapMutations(["add", "addN"]),
  handleAdd() {
 	 this.add();
    },
  handleAddN() {
	  this.addN(3);
    },
},

3.3-Action

Action的作用： Action用于处理Mutation 不能处理的异步任务，但是实际上也还是调用了 Mutation 中的方法来对 State 中的数据进行更改，即不能直接对Store中的数据进行变更操作。

Action在Store中的书写方式：

const store = new Vuex.Store({
	state: {
		count: 0,
  	},
  	mutations: {
  		// 只传入单个参数的书写方法：
	    add(state) {
		  state.count++;
	   },

		// 传入多个参数的书写方法：
		addN(state, step) {
  			state.count += step;
	   	},
	 },
	 actions: {
		// 在 actions 中不能直接修改 state 中的值，必须通过调用 mutations 中的方法进行修改
		// 只传入一个参数的书写方法：
	    addAsync(context) {
	      setTimeout(() => {
	        context.commit("add");
	      }, 1000);
	    },
	    
	    // 传入多个参数的书写方法：
	    addAsyncN(context, step) {
	      setTimeout(() => {
	        context.commit("addN", step);
	      }, 1000);
	    },
	},
})

Action使用的两种方式：

// 方法一：直接通过使用$store的dispatch进行使用	
methods: {
	// 只传入单个参数的使用方法：
	handleAddAsync(){
		this.$store.dispatch('addAsync');
	}

	// 传入多个参数的使用方法：
	handleAddAsyncN() {
  		this.$store.dispatch("addAsyncN", 2);
	},
}



// 方法二：按需导入mapActions函数
// 1. 从Vuex中按需导入mapActions函数
import { mapActions} from "vuex";

// 2. 将要使用的函数方法通过 mapActions变成组件的 methods 中的方法来使用
methods: {
  ...mapActions(["addAsync", "addAsyncN"]),
},

// 3. 通过this进行使用
methods: {
  ...mapActions(["addAsync", "addAsyncN"]),
  handleAdd() {
 	 this.addAsync();
    },
  handleAddN() {
	  this.addAsyncN(3);
    },
},

3.4-Getter

Getter的作用： Getter 不会对 state 中的数据进行修改或者改变，只是将数据进行一个加工处理，换一种展示状态，类似于 Vue 的计算属性。

Getter在Store中的书写方式：

const store = new Vuex.Store({
	state: {
		count: 0,
  	},
  	mutations: {
  		// 只传入单个参数的书写方法：
	    add(state) {
		  state.count++;
	   },

		// 传入多个参数的书写方法：
		addN(state, step) {
  			state.count += step;
	   	},
	 },
	 actions: {
		// 在 actions 中不能直接修改 state 中的值，必须通过调用 mutations 中的方法进行修改
		// 只传入一个参数的书写方法：
	    addAsync(context) {
	      setTimeout(() => {
	        context.commit("add");
	      }, 1000);
	    },
	    
	    // 传入多个参数的书写方法：
	    addAsyncN(context, step) {
	      setTimeout(() => {
	        context.commit("addN", step);
	      }, 1000);
	    },
	},
	getters: {
		showCount(state) {
  			return `当前的count值为【${state.count}】`;
    	},
	},
})

Getter使用的两种方式：

// 方法一：直接通过使用$store进行使用
// this.$store.getters.名称

this.$store.getters.showCount



// 方法二：按需导入mapGetters函数
// 1. 从Vuex中按需导入mapGetters函数
import { mapGetters} from "vuex";

// 2. 将当前组件需要的数据映射为组件的computed的计算属性
computed: {
  ...mapGetters(["showCount"]),
},

// 3. 通过this.showCount进行使用，在template模板中this可以省略

Vuex的安装与基本使用