Vuex简单入门

时间 2019-12-04

标签 vuex 简单入门繁體版

原文原文链接

Vuex是vue全家桶中最适合大型应用的代码库，能够保存网页应用的历史状态，提供网页回溯功能，管理各个组件的状态和关系。html

但对于小型应用来讲过于繁重，一个bus-中央总线就能够知足您的需求。vue

前言

vuex是vue全家桶中最难的一个，并且会感受比较绕，在学习以前，建议您先学习：
vue
vue-router
nodenode

简介

在作例子以前，咱们须要来了解一下Vuex的思想，避免盲人摸象，若是以为枯燥的话也能够先看后面的案例，可能会更容易理解。程序员

单向数据流

Vuex内容比较复杂，你们不妨类比组件来看一看，左边是官网单向数据流表，右边是vue组件系统：
vue-router

Action : 相似于methods方法，用来改变State中的数据（等会会提到mutations）
    State ： 相似于组件中data，用来保存数据（能够提供快照，回溯功能）
    View ： 这个是Vuex外的内容，经过action来实现功能，也从state中获取数据

这就是所谓的单向数据流vuex

Vuex的运行机制

Vuex运行机制以下图，在下剪去了一些复杂的内容

简单解释一下图中几个英文单词的意思：
四个元件：
Vue Components ：组件，你们应该已经写过不少了
Actions ：方法（异步），负责调用mutation里面的方法
Mutations ：方法（里面只能放同步），里面定义了各类方法，用来修改State的内容
State ：说白了就是一个对象，里面用对象储存内容，和data类似
四个动做：
Dispatch：派遣，相似于子组件的$emit
Commit ：触发，使用Vuex实例的commit方法，触发Mutation里面的方法
Mutate ：变动，使用Mutations里面的方法来改变State内容
Render ：实际上属于components组件调用State里面的内容来进行页面渲染vue-cli

想必你们看完这些已经有点晕了吧，晕就对了，接下来咱们来作点简单的实例。npm

示例

思惟导图

作以前，咱们先看下示例是如何运行的吧：

vm组件绑定了一个计算属性，从state里面拿值
vm组件侦测到点击事件，告诉store实例：让Action帮我改数据
Action收到领导的命令，告诉下属程序员mutations：给我改数据
Mutations就很听话的改变了State的数据
State做为总受固然很服帖的改变了数据
固然，State里面的数据逃不过vm的眼睛，vm计算属性检测到了数据变化，从而改变了值segmentfault

示例的初始化

咱们新建一个文件夹，新建一个html文件，引入基本的代码：app

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://unpkg.com/vuex"></script>
</head>
<body>
  <div id="app">

  </div>
  <script>
    const store = new Vuex.Store({
      state : {

      },
      actions : {

      },
      mutations : {

      }
    })

    let vm = new Vue({
      el : "#app",
      data : {

      },
      computed : {
      
      },
      methods : {

      }
    })
  </script>
</body>
</html>

以上初始化了咱们的项目，其中初始化了
store实例，包括三巨头：state,actions,mutations
vm实例，vue的一个组件而已

好，接下来咱们来作一个点击增长数字的网页

html数据渲染

修改如图红框中间的数据，这里咱们绑定了

count : 计算属性
counter : 函数，绑定在methods中

好的，接下来修改vm中内容：

解释下参数：

count : 计算属性，返回store里面的值
counter : 函数，使用store的dispatch方法，触发incrementAction 的Action方法

store中数据绑定

解释下几个参数：

count : 数字的计数，和data中数据很像
incrementAction ： 触发mutations中的increment方法
increment ： 增长数字的值，和methods中函数很像

好的，接下来刷新网页，点击按钮，是否是数字增长了呢了呢？这就是最简单的一个实例。