VuexDemo学习记录

VuexDemo学习记录

Vuex官方提供了一个很简单的demo来演示vuex的数据流,这里先对Vuex的demo进行一个简单的分析和理解

文件目录

  • /
  • main.js
  • app.vue
  • /vuex
    • action.js
    • getters.js
    • store.js
  • components
    • Display.vue
    • Increment.vue

vuex

vuex的数据流可以用三句话解决

用户在组件中的输入操作触发 action 调用;

Actions 通过分发 mutations 来修改 store 实例的状态;

Store 实例的状态变化反过来又通过 getters 被组件获知。

store

首先在store.js中声明 state以及mutations
其中state是用来放数据的,mutations则是用来放触发事件 当执行action的时候 action再去触发mutations

action

在actions.js则只声明了一个函数,这个函数的作用仅仅是用来调用mutaions 传递对应的参数给mcations

getter

vue提供了getter方法,当需要显示数据的时候,首先是调用数据的getter方法.那么在获取数据之前就可以利用getter方法对数据进行处理方便后续开发.

getter.js也仅仅是声明了一个函数 这个函数返回的是state中的内容.

那么这个传递过来的state参数是哪来的?
其实getter不关心是谁引用了 只关心有没有state.xxx 这个属性.所以这个state是由父级(此例是APP.vue)的store属性来控制的

Display.Vue

这个Vue组件仅仅做展示, 那么这里的展示就涉及到了一个共享数据 展示数据从哪里来?

很显然,展示的数据是共享的,所以展示的数据是从state中拿的,那么涉及到拿数据,肯定就需要getter.js来帮忙处理了

Increment.vue

这个Vue组件是用来执行actions的.
也就是这里的函数会调用actions.js 再由actions来触发mutations中的事件.

APP.vue

这里的App.vue
也就是用来引入组件模块,同时用来控制 子组件到底引入那个store

假如子组件在不同的父组件中,store也不可能一样吧.所以父组件就规定了store.

那么子组件的子组件,store如何控制呢?

实际上当父组件引用了a.store 子组件引用了b.store 其子组件显示的store是b.store 而不是a.

数据流图

规范

  1. 应用 state 存在于单个对象中;
  2. 只有 mutation handlers 可以改变 state;
  3. Mutations 必须是同步的,它们做的应该仅仅是改变 state;
  4. 所有类似数据获取的异步操作细节都应封装在 actions 里面。
  5. 组件通过 getters 从 store 中获取 state,并通过调用 actions 来改变 state。

Vuex actions 和 mutations 优雅的地方在于它们都只是一些函数。只需要遵循以上的准则,怎么组织代码就取决于你自己了。

应用结构