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

结果