weixin_30349597
weixin_30349597

学习不一样的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: '',
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