《web前端全栈成长计划》Vue第四章学习笔记(下)

举报
张辉 发表于 2020/09/10 16:50:18 2020/09/10
【摘要】 web前端全站成长计划第三阶段vue课程第四章的学习笔记(下)


Vue 第四章 Vuex

73 vuex-todolist的缓存实现

73.1 分析:

读的实现

  1. 由App.vue异步读backend保存的localStorage的todos内容

  2. 依次实现 actions.js, mutation-types.js,mutation.js

写的实现:

  1. TodoList.vue的计算属性todos会自动转换为对象的属性

  2. 在TodoList.vue中实现深度监视。

73.2 实践:

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
/* 入口js */
/* 创建vue实例 */

import Vue from 'vue' /* 注意大小写 */
import App from './App'
import store from './store'

import './base.css'

/* eslint-disable no-new */
/* 对应index.html的app */
/* 引入组件 将组件的映射名变为标签 组件一般是一个局部功能界面,包含了html,css,js,img等资源 */
/* 模板插入到el匹配的页面上的div去 参见 生命周期 当时判断了 是否有template选项,如果有,则编译template,挂载到页面上去 */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  store
})

App.vue

<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <!-- 以前传函数,现在不要传了,都从store读就可以了-->
      <TodoHeader />
      <TodoList />
      <TodoFooter />
    </div>
  </div>
</template>

<script>
  // 引入
  import TodoHeader from './components/TodoHeader'
  import TodoList from './components/TodoList'
  import TodoFooter from './components/TodoFooter'
  import storageUtils from './utils/storageUtils'

  export default {

    mounted() {
      // 异步获取保存的todos数据,并显示
      // 发送命令给action
      this.$store.dispatch('reqTodos')
    },

    // 加入标签
    components: {
      TodoHeader,
      TodoList,
      TodoFooter
    }
  }
</script>

<style>
/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>

componets/TodoHeader.vue

<template>
  <div class="todo-header">
    <!-- 第一步 给目标元素绑定监听 -->
    <input type="text" placeholder="请输入你的任务名称,按回车键确认"
           v-model="title" @keyup.enter="addItem"/>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: ''  //这个只是当前组件内部使用,仍然放在这里即可,不需要被vuex管理
      }
    },

    methods: {
      addItem() {
        // 1检查输入的合法性
        const title = this.title.trim()
        if(!title){
          alert('不能为空')
          return
        }

        // 2.根据输入生成一个对象
        const todo = {
          title,
          complete: false
        }

        // 3.将todo对象添加到todos
        // this.addTodo(todo)
        // 这时需要通知vuex
        this.$store.dispatch('addTodo',todo)

        // 4.清除输入
        this.title = ''
      }
    }
  }
</script>

<style>
/*header*/
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>

componets/TodoList.vue

<template>

    <ul class="todo-main">
      <TodoItem v-for="(todo, index) in todos" :key="index" :todo="todo" :index="index" />
    </ul>

</template>

<script>
  import { mapState } from 'vuex'
  import TodoItem from './TodoItem'
  import storageUtils from '../utils/storageUtils'
  export default {
    //声明
    // props: {
    //   todos: Array,
    //   deleteTodo: Function
    // },

    // 计算属性也会成为组件对象的属性
    computed: {
      ...mapState(['todos'])
    },

    watch: {  //监视todos的所有变化
      todos: {
        deep: true, // 深度监视
        handler: storageUtils.saveTodos  //一旦发现变了,保存todos到localStorage
      }
    },

    components: {
      TodoItem
    }

  }
</script>

<style>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

</style>

componets/TodoItem.vue

<template>
  <!--进入内部元素 会促发mouseout;只有离开才会使用mouseleave
  所以应该选择enter和leave
  -->
  <li @mouseenter="handleEnter(true)" @mouseleave="handleEnter(false)" :style="{background: bgColor}">
    <label>
      <input type="checkbox" v-model="todo.complete"/>
      <span>{{ todo.title }}    </label>
    <button class="btn btn-danger" v-show="isShow"  @click="deleteItem">删除</button>
  </template>

<script>
  export default {
    props: {
      todo: Object,
      index: Number
    },

    data() {
      return {
        bgColor: 'white',  // 背景颜色
        isShow: false   // 按钮默认是否显示
      }
    },

    methods: {
      handleEnter(isEnter) {
        if(isEnter) {
            this.bgColor = 'gray'
            this.isShow = true
        } else {
            this.bgColor = 'white'
            this.isShow = false
        }
      },

      deleteItem() {
        // const {todo, index, deleteTodo} = this
        // if(window.confirm(`确认删除${todo.title}`)){
        //   // deleteTodo(index)
        //   this.$store.dispatch("deleteTodo",index)
        // }
        this.$store.dispatch('deleteTodo', this.index)
      }
    }

  }
</script>

<style>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}

</style>

componets/TodoFooter.vue

<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" v-model="isAllComplete"/>
    </label>
    <span>
          <span>已完成{{completeCount}} / 全部{{totalCount}}
            <button class="btn btn-danger" v-show="completeCount" @click="clearAllCompleted">清除已完成任务</button>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  export default {

    computed: {
       ...mapGetters(['totalCount','completeCount']),
      // isAllComplete有点特殊
      isAllComplete: {
        get() {
          return this.$store.getters.isAllComplete
        },

        set(value) { // value是checkbox最新值
          this.$store.dispatch('selectAllTodos', value)
        }
      }
    },
    methods: {
      ...mapActions(['clearAllCompleted'])
    }

  }
</script>

<style>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>

store/index.js

/* vuex 最核心的管理对象 */
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

store/state.js

/* 状态对象 */
export default {
  todos: []
}

store/actions.js

// 接收xxx.vue的组件通知,触发mutation。js调用间接更新状态的方法的对象
import { ADD_TODO,DELETE_TODO,SELECT_ALL_TODOS,CLEAR_ALL_COMPLETED } from './mutation-types'
import storageUtils from '../utils/storageUtils'
export default {

  addTodo ({commit},todo) {
    // 提交一个mutation commit最终导致一个mutation调用
    // 无论是什么类型,都用对象包起来
    commit(ADD_TODO, {todo})
  },
  deleteTodo ({commit},index) {
    // 无论是什么类型,都用对象包起来
    commit(DELETE_TODO, {index})
  },

  selectAllTodos ({commit},check) {
    commit(SELECT_ALL_TODOS, {check})
  },

  clearAllCompleted ({commit}) {
    commit(CLEAR_ALL_COMPLETED)
  },

  //异步获取todos
  reqTodos ({commit}) {
    //模拟
    setTimeout(()=>{
      const todos = storageUtils.readTodos()
      //提交mutation
      commit(RECEIVE_TODOS, todos)
    },1000)
  }
}

store/mutation-types.js

/*
  所有mutation 的名称常量
 */
export const ADD_TODO = 'add_todo'  // 添加todo
export const DELETE_TODO = 'delete_todo'  // 删除todo
export const SELECT_ALL_TODOS = 'select_all_todos' // 选择所有
export const CLEAR_ALL_COMPLETED = 'clear_all_completed' // 清除已完成的todo
export const RECEIVE_TODOS = 'receive_todos'  // 接收todos

store/mutation.js

/*
  包含多个由action触发,直接更新状态方法的对象
 */

import {ADD_TODO, DELETE_TODO, SELECT_ALL_TODOS, CLEAR_ALL_COMPLETED, RECEIVE_TODOS} from './mutation-types'

export default {
  // 这里变成中括号比较难以理解
  [ADD_TODO] (state, {todo}) {
    state.todos.unshift(todo)
  },

  [DELETE_TODO] (state, {index}) {
    state.todos.splice(index,1)
  },

  [SELECT_ALL_TODOS] (state, {check}) {
    state.todos.forEach(todo => todo.complete = check)
  },

  [CLEAR_ALL_COMPLETED] (state) {
    state.todos = state.todos.filter( todo => !todo.complete)
  },

  [RECEIVE_TODOS] (state, todos) {
    state.todos = todos
  }
}
// 从组件开始,到action,到mutation,再更新状态

store/getters.js

// 包含所有state的所有计算属性
export default {

  //总数
  totalCount(state) {
    return state.todos.length
  },

  //完成的数量
  completeCount(state) {
    return state.todos.reduce((preTotal, todo) => {
      return preTotal + (todo.complete ? 1 : 0)
    },0)
  },

  //判断是否全部选中
  isAllSelected (state, getters) {
    // return getters.totalCount === getters.completeCount  && getters.totalCount > 0
    return getters.totalCount === getters.completeCount  && state.todos.length > 0
  }

}

73.3 实际效果:

两个问题:

  1. List显示的是歪的。

  2. 关闭浏览器重启后并没有保存原来的效果

检查日志:

image.png

发现RECEIVE_TODOS并没有生效。。。

检查了一下action.js:

import { ADD_TODO,DELETE_TODO,SELECT_ALL_TODOS,CLEAR_ALL_COMPLETED } from './mutation-types'

这里忘记引用了RECEIVE_TODOS

修改为:

import { ADD_TODO,DELETE_TODO,SELECT_ALL_TODOS,CLEAR_ALL_COMPLETED,RECEIVE_TODOS } from './mutation-types'

就可以生效了。

第二个问题:关于button浮动的问题,在 @胡琦 大大的提示下,检查了下浮动的问题,把li标签的float去掉就好了。。

li label {
  /*float: left;*/
  /*cursor: pointer;*/
}

最后的具体效果如下:

image.png

删除后:

image.png

关掉浏览器,再打开

image.png

这样缓存也没问题,位置也没问题了。。

74 vuex的render配置

找到src下的入口js

原始写法:

new Vue({
  el: '#app',
  components: { App },  // 将APP映射成标签
  template: '<App/>',
  store
})

更简洁的写法:2个配置变成1个

new Vue({
  el: '#app',
  render: h=> h(App), // 渲染函数,函数接收参数是一个匿名函数,接收App组件,箭头代表是一个函数,同时代表是一个return。
  store
})

  其实上面render那句等同于:

new Vue({
  el: '#app',
  render: function( createElement ) {
    return createElement(App)  // 返回的结果会插入到el定义的div里面去。
  },
  store
})


75 vuex的概念总结

  1. state 对象 vuex管理的状态 ,指定了很多状态属性的初始值。唯一的。

    eg: const state = { xxx: initValue } 

  2. mutations 对象 方法是直接更新state。通过state进行状态引用,并可以接收参数

    eg: const mutations = { yyy(state,data1) { //更新state操作 } }

  3. actions 对象 函数跟组件中的回调函数是对照关系。action不直接更新,而是通过commit触发mutation更新。通过state进行状态应用,并可以接收参数。需要把数据包装成对象传递。actions里面可以去执行ajax等异步调用

    eg:  const actions = { xxx({ commit, state},data1){ commit('yyy',{data1}) } }

  4. vue componets通过dispatch调用action (组件更接近用户)

    eg: $store.dispatch('action名称',data1)

  5. getters 计算属性的get的对象。getters由组件使用。(封装性:定义语法时尽量让上层简单)组件通过 $store.getters.xxx调用

    eg: const getters = { mmm (state) { return ...} }

  6. modules: 模块:范例是src-shop。对于大型的项目模块适用。每个功能模块创建一个modules下的js。每个modules里面里面都有一整套(state,mutation,action等)使用频率不高。

  7. 向外暴露一个store对象。基本语法,不会变。

  8. 组件中实现简化的语法 mapState,mapGetters,mapActions

    eg: import {mapGetters, mapActions} from 'vuex'   

    computed: {  ...mapState(['xxx']),  ...mapGetters(['mmm']), } 

    methods mapActions(['zzz'])

  9. 映射store 在main.js中。

  10. store对象:this.$store 由state和getters属性, 有dispatch方法可以分发调用action

特点:结构清晰。模型简洁,易于上手。


(全文完,谢谢阅读)






【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。