Vuex入门

一、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、效果