Vuex的基本使用总结

1.Vuex概述

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

使用Vuex管理数据的好处：

• 能够在vuex中集中管理共享的数据，便于开发和后期进行维护
• 能够高效的实现组件之间的数据共享，提高开发效率
• 存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

什么样的数据适合存储到 Vuex 中
一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的 data 中即可。

2.vuex的使用

1. 安装 vuex 依赖包

   npm install vuex --save
   

2. 导入 vuex 包

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

3. 创建 store 对象

   const store = new Vuex.Store({
        
   	// state 中存分的就是全局共享的数据
   	state: {
         count: 0 }
   })
   

4. 将 store 对象挂载到 vue 实例中

   new Vue({
        
   	el:  '#app',
   	render: h => h(app),
   	router,
   	// 将创建的共享数据对象，挂载到 Vue 实例中
   	// 所有的组件都可以直接从 store 中获取全局的数据
   	store
   })
   

3. Vuex的核心概念

3.1 State

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

// 创建 store 数据源，提供唯一公共数据
	const store = new Vuex.Store({
   
		state: {
    count: 0 }
	})

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

this.$store.state.全局数据名称
// this.$store.state.count

组件访问 State 中数据的第二种方式：mapState

// 1. 从 vuex 中按需导入 mapState 函数
import {
    mapState } from 'vuex'

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

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

<template