Vue学习【5】— Vuex超简单快速入门与使用

本文链接：https://blog.csdn.net/qq_22841567/article/details/104939403

1.什么是Vuex？

官方解如下：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

哈哈哈，看完一脸懵逼，
简单来说，Vuex就是前台存储数据的一个仓库Store，组件需要的值可以从Store中存取。Vuex集中管理数据的状态。

2.Vuex在项目中的基本安装使用

第一步：安装Vuex

npm install vuex --save

第二步：在main.js中引入

import vuex from 'vuex'
Vue.use(vuex);

第三步：实例化Vue对象时注册Store

new Vue({
  el: '#app',
  store    //使用store
})

完成以上，就可以，在store中管理数据，在页面中使用store 中的数据了

下面讲讲怎么管理数据，怎么在页面中使用数据

3.store数据管理与使用（入门）

参考了官方文档，结合自己使用总结了一下基本的使用方式，适合入门使用
通常完成以上步骤之后，在项目目录中新建一个store文件夹，文件夹下面新建一个index.js
store.js的基本结构如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
	//state存储数据。相当于组件中data，与data使用遵循相同规则
  	state: {
  		count:1
  	},
  	//mutations改变state中数据的唯一方法（同步）
  	mutations: {
  		//接受state为参数，可获取state中数据
  		//第二个参数可有可无
  		changeCount1(state){
  			state.count++
  		},
  		changeCount2(state, value){
  			state.count+= value
  		}
  	},
  	//actions与mutations相似，他是触发mutations中的方法异步改变state中数据（异步）
	actions: {
		//接受context函数为参数，可以调用 context.commit 提交一个 mutation
		//或者通过 context.state 和 context.getters 来获取 state 和 getters
		asyncChangeCount(context){
			context.commit('changeCount1')
		}
	},
	//getters就像计算属性一样，对state中进行过滤
	getters: {},
})
export default store

3.1 state使用

state中定义数据状态

state: {
	count:1
}

如何在 Vue 组件中展示状态呢？两种方法
第一种：在计算属性中返回状态

<template>
	<div>{{ count }}</div>
</template>
<script>
export default {
	computed: {
	    count () {
	      return this.$store.state.count
	    }
  	}
}
</script>

第二种：mapState 辅助函数（适用于获取多个状态时候，将状态都声明为计算属性重复和冗余）
首先在组件中引入

import { mapState } from 'vuex'

然后在computed中展开…mapState

<template>
	<div>{{ count }}</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
	computed: {
		...mapState([
		  'count'
		])
	}
}
</script>

3.2 Getter使用

“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter 接受 state 作为其第一个参数

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Getter 也可以接受其他 getter 作为第二个参数：

getters: {
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

如何在组件中使用Getter？
第一种：在计算属性中返回

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

第二种：mapGetters 辅助函数将 store 中的 getter 映射到局部计算属性

<template>
	<div>{{ count }}</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
	computed: {
		...mapGetters([
		'doneTodosCount'
		])
	}
}
</script>

如果你想将一个 getter 属性另取一个名字，使用对象形式：

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

3.3 Mutation使用

Mutation中的数据处理函数，接受 state 作为第一个参数,可获取state中数据
第二个参数是额外参数（学名载荷），在大多数情况下，载荷应该是一个对象

mutations: {
	changeCount1(state){
		state.count++
	},
	changeCount2(state, n){
		state.count+= n
	},
	//在大多数情况下，载荷应该是一个对象
	changeCount3(state, payload){
		state.count+= payload.n
	}
},

如何在组件中调用处理函数？
第一种：this.$store.commit 方法触发处理函数

不传额外参数时：

store.commit('changeCount1')

不以对象方式传参

store.commit('changeCount2', 10)

以对象的方式传参（两种方式，不用type或者使用type）

store.commit('changeCount3', {
  n: 10
})
store.commit({
  type: 'changeCount3',
  n: 10
})

第二种：mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用

<template>
	<div>{{ count }}</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
	methods: {
		...mapMutations([
		 //将 `this.changeCount1()` 映射为 `this.$store.commit('changeCount1')`
		  'changeCount1',
		  //将 `this.changeCount2(n)` 映射为 `this.$store.commit('changeCount1',n)`
		  'changeCount2',
		  //将 `this.changeCount()` 映射为 `this.$store.commit('changeCount3')`
		  changeCount: 'changeCount3'
		])
	}
}
</script>

3.4 Action使用

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

actions: {
	asyncChangeCount(context){
		context.commit('changeCount1')
	}
},

用 ES2015 的参数解构来简化代码

actions: {
	asyncChangeCount ({ commit }){
		commit('changeCount1')
	}
},

如何在组件中分发使用action中的函数？
第一种：store.dispatch 方法触发,Actions 支持同样的载荷方式和对象方式进行分发

store.dispatch('asyncChangeCount')

// 以载荷形式分发
store.dispatch('asyncChangeCount', {
  n: 10
})

// 以对象形式分发
store.dispatch({
  type: 'asyncChangeCount',
  n: 10
})

第二种：mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用

<template>
	<div>{{ count }}</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
	methods: {
		...mapActions([
		 //将 `this.asyncChangeCount()` 映射为 `this.$store.dispatch('asyncChangeCount')`
		  'asyncChangeCount',
		  //将 `this.asyncChangeCount(n)` 映射为 `this.$store.dispatch('asyncChangeCount',n)`
		  'asyncChangeCount',
		  //将 `this.asyncChangeCount()` 映射为 `this.$store.dispatch('asyncChangeCount')`
		  asyncchangeCount: 'asyncChangeCount'
		])
	}
}
</script>