Vuex今日知识

**

1. Vuex 简单了解

**
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状
态，并以相应的规则保证状态以一种可预测的方式发生变化
换种说法可能更好理解
如果有一些公共的数据需要在多个组件中共享或者某一个状态的改变会影响多个组件，那么这时候用
vuex是非常合适的，比如我们经常会看到的中后台都有多风格的切换，这种全局的改变就可以用到vuex
去完成！
使用Vuex管理数据的好处：

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

上面是 vuex 的一个简单介绍，其实，我们还可以谈的话题还有很多，比如

• vue 中组件传值的方式都有哪些，各有什么优缺点
• vuex 到底适合什么样的项目
• 我们该如何选择适合自己项目的组件传值方式
  **
  安装
  当前的项目在创建时，并没有安装 vuex ，所以需要单独安装

npm install vuex

2. 简单组件传值

**
. 前面聊过，vuex 的主要作用就是解决数据共享的问题，也就是组件之间传值的问题
前面讲过的主要是通过输入和输出的方式传值

1. props：输入
2. $emit：输出

输入输出机制有个缺点：页面复杂时，经常需要层层传递数据，因为非父子组件间的交互，只能寻找最近的祖先组件来做中转

同时，输入输出机制还有一个局限性：当不同页面的组件需要进行数据交互时，它就无能为力了

平常开发，这种输入输出的方案也基本满足了

但如果有需要跨页面的数据交互或者说，有需要将数据做持久化处理的场景时；以及如果页面组件层次
复杂，存在props 和 $emit 层层传递时，这种方案其实是很难忍受的
初始化项目
打开刚刚创建的 vue项目，找到src目录中的App.vue组件，将代码重新编写如下：

<template>
  <div id="app">
    <my-add :count="count" @changeCount-add="handleChangeAdd"></my-add>
    <my-sub :count="count" @changeCount-sub="handleChangeSub"></my-sub>
  </div>
</template>

<script>
import Addition from './components/Addition.vue'
import Subtraction from './components/Subtraction.vue'
export default {
  data () {
    return {
      count: 0
    }
  },
  name: 'App',
  components: {
    'my-add': Addition,
    'my-sub': Subtraction
  },
  methods: {
    handleChangeAdd () {
      this.count++
    },
    handleChangeSub () {
      this.count--
    }
  }
}
</script>

<style>
</style>

在components文件夹中创建Addition.vue组件，代码如下：

<template>
  <div>
    <p>当前count变量的值是:{{ $store.state.count }}</p>
    <button @click="add">+1</button>
  </div>
</template>
<script>
export default {
  methods: {
    add () {
      this.$store.commit('addCount')
    }
  }
}
</script>

在components文件夹中创建Subtraction.vue组件，代码如下：

<template>
  <div>
    <p>当前count变量的值是:{{ $store.state.count }}</p>
    <button @click="sub">-1</button>
  </div>
</template>
<script>
export default {
  methods: {
    sub () {
      this.$store.commit('subCount')
    }
  }
}
</script>

2.2.2 实现
这是两个单独的组件，也就是两个单独的 vue 实例
vue 实例中的数据是私有的，但是我们的应用确实要操作同一个变量 count，所以变量 count 不能声明
在单独组件中
如何实现呢？
提供一种解决方案

• count 变量定义在父组件 App.vue 中
• 两个子组件中都一个一个 prop，名为 count
• 父组件通过 :count 为子组件中的 prop count 传值
• 子组件单击按钮时，通过 $emit，向外广播，告诉父组件应该为 count 变量+1或者 -1

App.vue 中代码

<template>
  <div id="app">
    <my-add :count="count" @changeCount-add="handleChangeAdd"></my-add>
    <my-sub :count="count" @changeCount-sub="handleChangeSub"></my-sub>
  </div>
</template>

<script>
import Addition from './components/Addition.vue'
import Subtraction from './components/Subtraction.vue'
export default {
  data () {
    return {
      count: 0
    }
  },
  name: 'App',
  components: {
    'my-add': Addition,
    'my-sub': Subtraction
  },
  methods: {
    handleChangeAdd () {
      this.count++
    },
    handleChangeSub () {
      this.count--
    }
  }
}
</script>

<style>
</style>