学习不一样的vue5:vuex(完结)
首先
今天的任务
- 利用vuex改造项目
- 完成余下的交互代码
vuex基础
新增知识点(必读)
为什么用vuex?
读了上面的知识点，您应该了解了vuex是干什么的,那我们这个项目为什么用vuex,做到这一步的小伙伴应该知道,我们所有组件，不管是菜单，还是详情都是同一组数据,但是它们的关系并不是父子组件,而我们想让他们共享一组数据并且互相通信，该怎么做呢？这里就要用到我们的主角vuex。
安装
|
1
|
npm install vuex --save
|
State,Mutation
新建src/vuex/store.js
新增知识点(必读)
|
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
新增知识点(必读)
|
1
2
3
4
|
export const getTodoList = state => {
return state.todoList; // 派生状态todoList
};
|
Action
创建src/vuex/action.js
新增知识点(必读)
|
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>
|