Vue学习之旅Part19：Vue的数据仓库 - Vuex的介绍及使用【完结】

一、概念

1、Vuex是什么

Vuex 是一个专为Vue.js应用程序开发的状态管理模式
它采用集中式存储管理应用的所有组件的状态 并以相应的规则保证状态以一种可预测的方式发生变化
(官网摘的 可能有些难懂)

上面的状态管理模式中的状态 可以理解为是数据
即 可以将一些共享的数据保存到Vuex中 以方便程序中的任何组件直接获取或修改公共数据
也就是说 Vuex相当于是一个全局的共享的数据存储空间 起到了数据仓库的作用
从而实现了数据和组件的分离

在开发中 有时会面临着一些尴尬局面：
比如：父组件要获取孙子组件里的数据
若不借助Vuex 则父组件要借助子组件来传递孙子组件的数据
若有了Vuex 可将孙子组件内的数据放在Vuex里 父组件也从Vuex里拿数据

再比如：组件要获取平级组件里的数据
若不借助Vuex 则父组件要借助中间人来传递数据
若有了Vuex 可将组件内的数据放在Vuex里 其它的组件也从Vuex里拿数据

2、区别

同样是存放数据 data属性和props属性和vuex的区别：

• data存放的是组件私有的数据
• props存放的是父组件传递来的数据
• vuex存放的是组件间共享的数据

---

二、安装

下载：

npm i vuex -S

安装：

import Vuex from 'vuex'
Vue.use(Vuex)

注：导入Vuex的语句必须放在导入Vue之后

创建Vuex的Store存储区：

const store = new Vuex.Store({
   
  state:
  {
   
    count: 0
  },
  mutations:
  {
   
    increment (state)
    {
   
      state.count++
    }
  }
})

Store的state属性 就相当于是data数据
Store的mutations属性 就相当于是methods方法 用于操作state中的数据

最后 将vuex创建的store实例挂载到Vue实例上：

只要挂载到了Vue实例上 那么任何组件都能全局使用store来存取数据了<