vuex基础 (一) -介绍——管理组件之间的共享数据 & 初始化功能

vuex基础-介绍

​ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

中文官网：https://vuex.vuejs.org/zh/

我们理解：

• vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。

​ 即：vuex是用来管理组件之间的共享数据

看图结论：

• state 管理数据，管理的数据是响应式的，当数据改变时驱动视图更新。
• mutations 更新数据，state中的数据只能使用mutations去改变数据。
• actions 请求数据，响应成功后把数据提交给mutations

vuex管理数据的逻辑：

vuex提供的管理数据流程：（含使用的方法）——没有父子之间传值简单

1.组件内部Vue Components绑定了一个button的点击事件

2.事件调用了Dishpatch

3.触发了Actions的方法

4.去拿后台数据Backend API，模拟了2s

5.拿到后台数据，通过Commit提交给Mutations

6.提交给Mutations之后，Mutations内部修改了State的状态数据

7.State里面的数据是响应式的

8.当数据修改时，会驱动视图组件页面内容的更新

vuex基础-初始化功能

初始化：

• 第一步：npm i vuex --save
• 第二步：import vuex from 'vuex'
• 第三步：Vue.use(vuex)
• 第四步：const store = new Vuex.Store({...配置项})
• 第五步：在根实例配置 store 选项指向 store 实例对象

在src/main.js中配置：

import Vue from 'vue'
// 配置vuex的步骤
// 1. 安装  npm i vuex
// 2. 导入
import Vuex from 'vuex'
// 3. 注册
Vue.use(vuex)
// 4. 初始化
const store = new Vuex.Store({
      // 配置项
})
// 5. 挂载根实例  其他组件访问vuex提供功能
new Vue({
  el: '#app',
  store
})

// 5. 挂载根实例  其他组件访问vuex提供功能
//new Vue({
//  store,
//  render: h => h(App),
//}).$mount('#app')