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 优雅的地方在于它们都只是一些函数。只需要遵循以上的准则，怎么组织代码就取决于你自己了。

应用结构