1.Vuex知识点

一： vuex的简单了解

Vuex是什么？

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享

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

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中

二： vuex的安装与使用

vuex的安装

npm install vuex --save
导入vuex包

import Vuex from ‘vuex’

创建store对象

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

将store对象挂载到vue实列中

new Vue({
	el: '#app',
	render: (h) => h(app),
	router,
	store,
})

三： Vuex的核心概念

State

State提供唯一的公共数据源，所有共享的数据都要统一放到 Store的 State I中进行存储。

1.1 组件访问state中数据的两种方式

(1) this.$store.state.全局数据名称

由于在模板字符串中，是不需要写this的，所以直接写this后边的

<h3>count值为{{$store.state.count}}</h3>

(2) mapState 映射为计算属性

通过刚オ导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed计算属性：

<h3>当前最新的count值为：{{ xCount }}</h3>
```
//1.导入辅助函数mapState
import { mapState } from 'vuex'

export default {
data() {
	return {
	}
},
computed: {
// mapState 可以接收数组或对象形式的参数 映射为计算属性，下面分别示例
//2.1 传入数组
...mapState(['count']),

//2.2 对象形式 可以自定义名称
...mapState({
	xCount:state => state.count
})
```

mutations

Mutations用于变更 Store中的数据

注意：只有 mutations里的函数，才有权利修改 state 的数据

注意：mutations里不能包含异步操作

2.1 定义mutation

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

2.2 触发mutations

(1) this.$store.commit() 触发 mutations

触发时不传值

Increment() {
	this.$store.commit('add')
}

b. 触发时传值

//触发
methods: {
	Increment() {
		this.$store.commit('addN',5)
	}
}

//定义
const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		addN(state，step) {
			state.count += step
		}
	}
})

(2) MapMutations 映射为方法

a. 从vuex中按需导入 mapMutations函数

import {mapMutations} from 'vuex’

b. 通过刚才按需导入的 mapMutations函数，映射为当前组件的methods函数。

import { mapMutations } from 'vuex'
methods: {
	...mapMutations(['add','addN']),
	Increment() {
		this.add()
	},
	IncrementN() {
			this.addN(5)
		},
}

actions

Actions用于处理异步任务。

如果通过异步操作变更数据，必须通过 Action,而不能使用Mutation,但是在 Action中还是要通过触发Mutation的方式间接变更数据。

注意：在Actions 中不能直接修改 state中的数据，要通过 mutations修改。

3.1 定义action

const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		add(state) {
			state.count ++
		}
	},
	actions: {
		getAddCount(context) {
			context.commit('add')
		}
	}
})

3.2 触发actions

(1) this.$store.dispatch() 触发 actions

//触发
methods: {
	Increment() {
		this.$store.dispath('getAddCount')
	}
}

(2) mapActions 映射为方法

a. 从vuex中按需导入 mapActions 函数

import {mapActions } from 'vuex’

b. 通过刚才按需导入的 mapActions 函数，映射为当前组件的methods函数。

import { mapActions } from 'vuex'
methods: {
	...mapActions (['getAddCount'),
	Increment() {
		this.getAddCount()
	},
}

Getters

Getter 用于对 Store中的数据进行加工处理形成新的数据。

Getter 不会修改 Store 中的原数据，它只起到一个包装器的作用，将Store中的数据加工后输出出来。

Getter可以对 Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。 Store中数据发生变化， Getter 的数据也会跟着变化。

4.1 定义getter

const store = new Vuex.Store({
	state: {
		count: 0
	},
	getters: {
		showNum(state){
			return '当前最新的数量是' + state.count	
		}
	}
})

4.2 触发getters

(1) this.$store.getters() 触发

<h3>{{$store.getters.showNum}}</h3>

(2) mapGetters 映射为计算属性

a. 从vuex中按需导入 mapGetters 函数

import {mapGetters } from 'vuex’

b. mapGetters 映射为计算属性。

import { mapGetters } from 'vuex'
methods: {
	...mapGetters (['showNum')
}

vuex知识点-notion

1.Vuex知识点

一： vuex的简单了解

二： vuex的安装与使用

三： Vuex的核心概念