目录
一、引言
1.1. vuex的概念
vuex 是一个 vue 的 状态管理工具，在我们的开发过程中，状态本质上就是数据。vuex 相当于是一个插件，可以帮我们管理 vue 通用的数据 (多组件共享的数据)。
1.2. vuex使用场景
① 某个状态在很多个组件中使用 (如个人信息)
② 多个组件共同维护一份数据 (购物车)
1.3. 优势
① 共同维护一份数据，数据集中化管理。
② 支持响应式变化
③ 操作简洁 (vuex提供了一些辅助函数)
二、创建演示项目
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. 新建仓库
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 = false
new 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中的数据 自动 映射到 组件的计算属性中，其功能如同下列代码：
标准使用方法：
