个人网站地址

Vue + express + Mongodb构建请大家多支持一下。

前言

vuex的使用,我一直以来用都发现,自己用错了,这次正好整理下我们在src下创建个目录为store

在store下分别创建4个js文件actions.js,index.js,mutation-types.js,mutations.js 具体文件夹分类,可以看上一篇的最后

看名字也就知道这4个分别是做啥用的了，建议大家多阅读阅读vuex的文档，多姿势多动手实践，慢慢的也就能理解了。

// src/store/index.js/** * Created by Admin on 2017/11/21. */import Vue from 'vue';import Vuex from 'vuex';import mutations from './mutations'; //后面会介绍到import actions from './actions'; //后面会介绍到Vue.use(Vuex);const store = new Vuex.Store({  mutations,  actions,  // 先写个初始数据  state: {    totalIndex: 0,    list: [{      name: 'story',      avatar: 'https://i.imgur.com/LIvj3YT.jpg',      date: '2017年11月23日15:34',      introduce: '请看,这是我女神'    }]  }});export default store;复制代码

不出意外的话，你可以在首页下看见这样的页面

说明,vuex初始数据好啦,下面开始写创建和删除

创建计划列表组件

然后我们需要去创建我们的创建,创建部分很简单,目前只通过名字和内容,时间为获取当前时间,头像固定。

/src/views/creatPlan/creatPlan.vue
    复制代码

JS部分

复制代码

这个组件很简单就2个input输入而已，然后就一个按钮，保存我们就把数据push进我们store的列表里

vuex部分

在vue2.0中废除了使用事件的方式进行通信，所以在小项目中我们可以使用Event Bus，其余最好都使用vuex，本文我们使用Vuex来实现数据通信

相信你刚刚已经看见了我写了很多this.$store.dispatch('savePlan', plan) 类似这样的代码，我们再次统一说明。

仔细思考一下，我们需要两个全局数据，一个为所有计划的件数，一个是计划列表的数组。

src/store/index.js 没啥太多可介绍的，其实就是传入我们的state,mutations,actions来初始化我们的Store。如果有需要的话我们还可能需要创建我们的getter在本例中就不用了。

接着我们看mutation-types.js，既然想很明确了解数据，那就应该有什么样的操作看起，当然这也看个人口味哈

// src/store/mutation-types.js// 新增和删除一条计划export const SAVE_PLAN = 'SAVE_PLAN';export const DELETE_PLAN = 'DELETE_PLAN';复制代码

// src/store/mutation.jsimport * as types from './mutation-types';export default {  // 新增计划  [types.SAVE_PLAN] (state, plan) {    state.list.push(      Object.assign({ }, plan)    );  },  // 删除某计划  [types.DELETE_PLAN] (state, idx) {    state.list.splice(idx, 1);  }};复制代码

最后对应看我们的actions就很明白了

// src/store/actions.jsimport * as types from './mutation-types';export default {  savePlan ({ commit }, plan) {    commit(types.SAVE_PLAN, plan);  },  deletePlan ({ commit }, plan) {    commit(types.DELETE_PLAN, plan);  }};复制代码

我们的actions其实就是去触发事件和传入参数啦

this.$store.dispatch('savePlan', plan) 当执行了这样的方法就会调用actions.js里的savePlan方法，而savePlan又会触发 mutations里的 types.SAVE_PLAN最后修改数据视图更新

PS：在这有个技巧就是，在mutations里都是用大写下划线连接，而我们的actions里都用小写驼峰对应。个人理解这其实就是一个发布订阅的模式

mutation-types 记录我们所有的事件名

mutations 注册我们各种数据变化的方法

actions 则可以编写异步的逻辑或者是一些逻辑，再去commit 我们的事件

如果有getter 我们可以把一些需要处理返回的数据放在这即可，不进行业务操作

开始体验下你自己的计划板吧！

::: hljs-center 来加我啊 :::