vuex基础入门

前景提要

vue的基本特点：

• 双向绑定
• 虚拟 dom
• 组件化，模块化
• 组件化----》数据传值：父子，子父，非父子。单向数据流。ref
• 如果说我组件里面的数据比较复杂，组件之间的来回传值，来回传容易出错，并且很费劲

介绍

vuex 读：vue 叉

vuex是什么？

• 是一个对数据进行集中式管理的工具

---

帮助我们解决了什么问题？

1. 数据传值繁琐问题
2. 实现了数据的共享。数据：定义的DATA,包括方法，包括服务器端的数据。
   • 我在组件 a 中用到这个方法，我在组件 b 中也用到这个方法，那么就可以把这个方法统一交给 vuex去完成。如果没有vuex，那我的组件a和b都要单独来设置一个方法
   • 那如果我把这个方法写入到一个模块当中，这样不就不用重复写了？这就相当于你自己完成了vuex的一部分，因为vuex里面已经把这个功能给你提过了，所以我们用 vuex就不用自己再过多的针对某一个项来单独设置模块了

vuex 基本部分

由五部构成

• 最重要的是前三个，只要你把前三个学好了，你的 vuex就算学成了
• 第4和第5是为前三个做服务的

    1. state：数据状态-------------------------------------  仓库当中的商品
    2. mutations：函数，同步操作。更改state----------------   工人。用来操作商品
    3. actions:函数，异步操作。通过调用mutations来更改数据---  老板，发送命令
    4. getters:计算属性
    5. modules：模块化。

vuex使用之前

你需要安装项目所需要的 vuex 插件

详细安装教程

vuex 初始目录及内容介绍

• 你安装完以后会有一个 store 目录
• 这个 store 就是存储咱们数据的一个仓库

---

store 里面有一个 index.js，这里面就是你写代码的地方

index.js内容详细介绍

import Vue from 'vue'; // 引入VUE核心库
import Vuex from 'vuex'// 引入VUEX核心库

Vue.use(Vuex); // 安装VUEX

export default new Vuex.Store({  // 创建了一个VUEX仓库。

  state: {        },   // 数据状态
  
  mutations: {    },   // 更改数据状态。通过mutations来更改数据状态是唯一的正途。
                       // 是一个函数，函数的名字即是mutations的名字。建议大写。
 
  actions: {      },   // 行为。异步操作。通过该操作可以获得新的数据，得到数据以后可以通过调用mutations来更改数据状态。
    

  modules: {      },   //模块化
 
  getters:{       }    //计算属性


})