第四十一章 Vue之初识VueX

目录

一、引言

1.1. vuex的概念

1.2. vuex使用场景

1.3. 优势

二、创建演示项目

2.1. 构建项目步骤

2.2. 项目最终生成结构

2.3. 创建项目文件

2.3.1. App.vue 

2.3.2. Son1.vue

2.3.3. Son2.vue

三、创建一个空仓库

3.1. 安装vuex

3.2. 新建仓库

3.3. 挂载仓库

3.4. 完整代码

3.4.1. main.js

3.4.2. index.js

四、提供/访问vuex数据

4.1. 提供数据

4.2. 使用数据

4.2.1. 通过 store 直接访问

4.2.2. 通过辅助函数 (简化)

---

一、引言

1.1. vuex的概念

vuex 是一个 vue 的 状态管理工具，在我们的开发过程中，状态本质上就是数据。vuex 相当于是一个插件，可以帮我们管理 vue 通用的数据 (多组件共享的数据)。

1.2. vuex使用场景

① 某个状态在很多个组件中使用 (如个人信息)

② 多个组件共同维护一份数据 (购物车)

1.3. 优势

① 共同维护一份数据，数据集中化管理。

② 支持响应式变化

③ 操作简洁 (vuex提供了一些辅助函数)

二、创建演示项目

基于VueCli脚手架，构建一个vuex[多组件数据共享]的演示案例项目，该项目的演示效果是三个组件, 共享一份数据：

1. 任意一个组件都可以修改数据

2. 三个组件的数据是同步的

2.1. 构建项目步骤

 

 

2.2. 项目最终生成结构

2.3. 创建项目文件

2.3.1. App.vue 

<template><div id="app"><h1>根组件</h1><input type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
export default {name: 'app',data () {return {}},components: {Son1,Son2}
}
</script><style></style>

2.3.2. Son1.vue

<template><div class="box"><h2>Son1 子组件</h2>从vuex中获取的值：<label></label><br><button>值 + 1</button></div>
</template><script>
export default {name: 'Son1Com'
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

2.3.3. Son2.vue

<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值：<label></label><br><button>值 - 1</button></div></template><script>
export default {name: 'Son2Com'
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

三、创建一个空仓库

注：版本vue2安装的vuex版本为3，版本vue3安装的vuex版本为4

3.1. 安装vuex

yarn add vuex@3

3.2. 新建仓库

创建 store/index.js 专门存放 vuex

配置使用vuex Vue.use(Vuex)

创建仓库 new Vuex.Store()

3.3. 挂载仓库

在 main.js 中导入挂载到 Vue 实例上

3.4. 完整代码

3.4.1. main.js

import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')

3.4.2. index.js

// 存放的是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'// 配置插件给Vue使用
Vue.use(Vuex)// 创建仓库（空仓库）
const store = new Vuex.Store()// 导出给main.js使用
export default store

四、提供/访问vuex数据

4.1. 提供数据

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

在 state 对象中可以添加我们要共享的数据。

4.2. 使用数据

4.2.1. 通过 store 直接访问

 

4.2.2. 通过辅助函数 (简化)

mapState是辅助函数，帮助我们把 store中的数据 自动 映射到 组件的计算属性中，其功能如同下列代码：

import { mapState } from 'vuex'  

mapState(['count'])

computed: {

...mapState(['count'])

}

标准使用方法：