一、Vuex概述
1、组价之间共享数据的方式
父向子传值:v-bind 属性绑定
子向父传值:v-on 事件绑定
兄弟组件之间数据共享:EventBus
- $on 接收数据的那个组件
- $emit 发送数据的那个组件
2、Vuex概念
Vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。
3、使用Vuex的好处
1、能够在 vuex 中集中管理共享的数据,易于开发和后期维护
2、能够高效地实现组件之间的数据共享,提高开发效率
3、储存在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
二、基本使用
注意: 使用的前提是使用可视化工具创建一个项目
1、安装
npm install vuex
2、导入
import Vuex from 'vuex'
Vue.use(Vuex)
3、创建 store 对象
new Vuex.Store({
state: {
// 存储共享数据
user: {
id: 1,
name: "张三",
},
},
getters: {
// 主要用于对共享数据进行显示调整
// 映射到 computed ...mapGetters(["属性名"])
info(state) {
return `编号: ${state.user.id} 姓名:${state.user.name}`;
},
},
mutations: {
//直接操作 state 里的数据
// 映射到 methods ...mapMutations(["方法名"])
// 不推荐直接操作
setUser(state, name) {
state.user.name = name;
},
},
actions: {
// 间接 操作 state 里的数据 通过调用 mutations 里的函数
// 映射到 methods ...mapActions(["方法名"])
setUser(context, name) {
context.commit("setUser", name);
},
},
modules: {},
});
4、使用Vuex
<template>
<div>
<h4>编号:{{user.id}} 姓名:{{user.name}}</h4>
<button @click="setUser('李四')">修改</button>
<h4>{{ info }}</h4>
</div>
</template>
<script type = "text/ecmascript-6">
import {mapState,mapActions, mapGetters} from "vuex"
export default {
computed:{
...mapState(["user"]),
...mapGetters(["info"])
},
methods:{
...mapActions(["setUser"]),
}
}
</script>
5、效果