个人网站地址 www.wenghaoping.com
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
<template>
<div class="creatPlan" v-loading.fullscreen="loading" element-loading-text="拼命加载中">
<el-form ref="formData" :model="formData" label-width="80px">
<el-row :span="24" :gutter="32">
<el-col :span="12">
<el-form-item
label="名字">
<el-input v-model="formData.name" placeholder="名字"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :span="24" :gutter="32">
<el-col :span="24">
<el-form-item
label="内容">
<el-input v-model="formData.introduce" placeholder="内容"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :span="24" :gutter="32">
<el-col :span="24">
<el-button type="primary" round @click="save">保存</el-button>
</el-col>
</el-row>
</el-form>
</div>
</template>
JS部分
<script type="text/ecmascript-6">
import { CurentTime } from '@/utils/formData'; // 这是一个获取当前时间的工具,后期会讲到
export default {
props: [],
data () {
return {
loading: false,
formData: {
name: '',
introduce: ''
}
};
},
computed: {},
mounted () {},
// 组件
components: {},
methods: {
save () {
const plan = {
avatar: 'https://i.imgur.com/LIvj3YT.jpg',
name: this.formData.name,
introduce: this.formData.introduce,
date: CurentTime() // 使用获取当前时间工具
};
// 添加计划
this.$store.dispatch('savePlan', plan);
this.$router.go(-1);
}
},
// 当dom一创建时
created () {},
watch: {}
};
</script>
这个组件很简单就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.js
import * 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.js
import * 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 来加我啊 :::
