学习不一样的vue5:vuex(完结)

学习不一样的vue5:vuex(完结)

 发表于 2017-09-10 |  分类于 web前端|  |  阅读次数 4029

首先

• 首发博客: 我的博客
• 项目源码: 源码(喜欢请star)
• 项目预览: 预览
• 上一章: 《学习不一样的vue4:mock与axios实战2》
• 我的Q群: meteor高手群 vue学习交流群

今天的任务

• 利用vuex改造项目
• 完成余下的交互代码

vuex基础

新增知识点(必读)

• 组件通信
• Vuex 是什么？

为什么用vuex?

读了上面的知识点，您应该了解了vuex是干什么的,那我们这个项目为什么用vuex,做到这一步的小伙伴应该知道,我们所有组件，不管是菜单，还是详情都是同一组数据,但是它们的关系并不是父子组件,而我们想让他们共享一组数据并且互相通信，该怎么做呢？这里就要用到我们的主角vuex。

安装

1	npm install vuex --save

State,Mutation

新建src/vuex/store.js

新增知识点(必读)

• State
• mutations

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

import Vue from 'vue'; import Vuex from 'vuex'; import * as actions from './actions'; import * as getters from './getters';   Vue.use(Vuex); //安装 Vuex 插件   // 创建初始应用全局状态变量 const state = { todoList: [], //指我们的待办事项列表数据 menuOpen: false //移动端的时候菜单是否开启 };   // 定义所需的 mutations const mutations = { EDITTODE(state, data) { // 定义名为 EDITTODE函数用作改变todoList的值 state.todoList = data; }, MENUOPEN(state) { // 定义名为 MENUOPEN函数用作改变menuOpen的值 state.menuOpen = !state.menuOpen; } };   // 创建 store 实例并且导出 export default new Vuex.Store({ actions, getters, state, mutations });

Getter

创建src/vuex/getters.js

新增知识点(必读)

• Getter

1 2 3 4

export const getTodoList = state => { return state.todoList; // 派生状态todoList };

Action

创建src/vuex/action.js

新增知识点(必读)

• Action
• promise

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

import { getTodoList } from '../api/api'; // 引入api接口函数getTodoList，请求最新的代办事项列表数据   export const getTodo = ({ //定义一个名字为getTodo的事件 commit }) => { return new Promise((resolve) => { /** *调用 getTodo这个函数的时候 会调用getTodoList这个ajax请求函数， 函数返回值后，在调用store.js里面的EDITTODE方法，并且把值传给它。 */ getTodoList().then(res => { commit('EDITTODE', res.data.todos); resolve(); }); }); };   export const updateMenu = ({ //定义一个名字为updateMenu的事件 commit }) => { commit('MENUOPEN'); // 调用store.js里面的MENUOPEN方法 };

注入实例

回到 src/main.js

1 2 3 4 5 6 7 8 9 10

import store from './vuex/store'; // 引入vuex实例 new Vue({ el: '#app', router, store, //注入 template: '<App/>', components: { App // } });

项目改造vuex

移动端菜单

打开src/components/layouts.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<template> + <section class="container" :class="{'menu-open': menuOpen}"> <!-- 根据menuOpen的值来判断是否使用menu-open样式 --> <section class="menu"> <menus></menus> </section> + <div class="content-overlay" @click="$store.dispatch('updateMenu')"></div> <!-- 这个是当页面收缩覆盖在内容上面的模糊层，点击后复原 他可以直接调用vuex actions.js里面的updateMenu方法--> <div class="content-container"> <router-view></router-view> </div> </section> </template>   <script> ...   computed: { menuOpen() { return this.$store.state.menuOpen; } }; ... </script>

打开 src/components/todo.vue

1 2 3 4 5 6

<template> ... + <div class="nav-group" @click="$store.dispatch('updateMenu')" v-show="!isUpdate"> <!-- 在菜单的图标下面添加updateMenu时间，他可以直接调用vuex actions.js里面的updateMenu方法 --> ... <template>

结果

菜单改造

打开src/components/menus.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<template> ... + <a @click="goList(item.id)" class="list-todo list activeListClass" :class=" {'active': item.id === todoId}" v-for="(item,index) in todoList" :key="index"> <!-- 把以前的item换成todoList --> ... </template> <script> ... export default { ... computed: { + todoList() { return this.$store.getters.getTodoList; // 返回vuex getters.js 定义的getTodoList数据 } }, + created() { this.$store.dispatch('getTodo').then(() => { //调用vuex actions.js 里面的 getTodo函数 this.$nextTick(() => { this.goList(this.todoList[0].id); }); }); }, methods: { + addTodoList() { // 点击新增按钮时候 //调用vuex actions.js 里面的 getTodo函数 addTodo({}).then(data => { this.$store.dispatch('getTodo').then(() => { this.$nextTick(() => { setTimeout(() => { this.goList(this.todoList[this.todoList.length - 1].id); }, 100); }); }); }); } } }; ... </script> ...

结果

如果是以下情况，那么改造就成功了

###代办项修改,锁定，删除

修改

打开 src/components/todo.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

<template> ...   + <div class="form list-edit-form" v-show="isUpdate"> <!-- 当用户点击标题进入修改状态，就显示当前内容可以修改 --> + <input type="text" v-model="todo.title" @keyup.enter="updateTitle" :disabled="todo.locked"> + <div class="nav-group right"> + <a class="nav-item" @click="isUpdate = false"> + <span class="icon-close"> + </span> + </a> + </div> + </div>   ...   + <div class="nav-group" @click="$store.dispatch('updateMenu')" v-show="!isUpdate"> ... + <h1 class="title-page" v-show="!isUpdate" @click="isUpdate = true"> ... + <div class="nav-group right" v-show="!isUpdate"> </template>     <script> ... export default { data() { return { + isUpdate: false // 新增修改状态 } } methods: { + updateTodo() { + let _this = this; + editTodo({ + todo: this.todo + }).then(data => { // _this.init(); + _this.$store.dispatch('getTodo'); }); }, + updateTitle() { + this.updateTodo(); + this.isUpdate = false; }, } } </script>

结果

锁定

打开 src/components/todo.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<template> ... + <a class=" nav-item" @click="onlock"> <!-- cicon-lock锁定的图标icon-unlock：非锁定的图标 --> <span class="icon-lock" v-if="todo.locked"></span> <span class="icon-unlock" v-else> </span> </a> .... </template> <script> ... methods: { + onlock() { + this.todo.locked = !this.todo.locked; + this.updateTodo(); + } }   ... </script>

结果

删除

打开 src/components/todo.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<template> ... <a class="nav-item"> + <span class="icon-trash" @click="onDelete"> </span> </a> .... </template> <script> ... methods: { + onDelete() { + this.todo.isDelete = true; + this.updateTodo(); + }, }   ... </script>

结果

代办项单项修改,锁定，删除

打开src/components/Item.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67

<template> <transition name="slide-fade"> <div class="list-item editingClass editing " :class="{checked: item.checked}" v-show="!item.isDelete"> <label class="checkbox"> <input type="checkbox" v-model="item.checked" name="checked" @change="onChange" :disabled="locked"> <span class="checkbox-custom"></span> </label> <input type="text" v-model="item.text" placeholder='写点什么。。。' :disabled=" item.checked || locked" @keyup.enter="onChange"> <a class="delete-item" v-if="item.checked && !locked" @click="item.isDelete = true;onChange()"> <span class="icon-trash"></span> </a> </div> </transition> </template> <script> // item 是todo的子组件,他接受一个对象item,来进行处理 import { editRecord } from '../api/api'; export default { props: { item: { type: Object, default: () => { return { checked: false, text: '你好,世界' } } }, 'index': {   }, 'id': {   }, 'init': {   }, 'locked': {   }, }, methods: { // 用户无论删除,修改，锁定都可以利用这个方法。 onChange() { editRecord({ id: this.id, record: this.item, index: this.index }).then(data => { this.init(); this.$store.dispatch('getTodo'); }); } } }; </script> <style lang="less"> @import '../common/style/list-items.less'; .slide-fade-enter-active { transition: all .3s ease; } .slide-fade-leave-active { transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .slide-fade-enter, .slide-fade-leave-active { transform: translateX(10px); opacity: 0; } </style>

结果