《web前端全栈成长计划》Vue第四章学习笔记（上）（web全栈开发进阶之路）

本文摘自 论坛 https://bbs.huaweicloud.com/forum/forum.php?mod=viewthread&tid=71831&authorid=70062&page=1 笔者对vue学习的笔记。由于vue笔者也是刚刚接触，基本上都是以观看视频和具体动手实践的方式进行。为防止迷路，特收集整理成本博文。

文中的图片、代码很多来自于教程本身，但都来自于本人实践后截图和拷贝的结果，特此说明。

Vue 第四章 Vuex

66 vuex：counter应用的vuex实战1

66.1 安装vuex

66.2 实战

创建vuex的核心管理对象模块vuex

编写store.js ,main.js及App.vue

store.js

/* vuex的核心管理对象模块 */ import Vue from 'vue' import Vuex from 'vuex' // 声明使用 Vue.use(Vuex) // 状态 const state = {   count: 0  // 从App的data移过来，初始化状态 } // 包含多个更新state函数的对象 const mutations = {   // 本质上只有+1和-1两个操作   // 增加的mutation   INCREMENT(state){     state.count ++   },   // 减少的mutation   DECREMENT(state){     state.count --   } } // 包含多个对应事件回调函数的对象 const actions = {   // 一个函数就是一个action   // 增加   increment({commit}){     // 提交一个mutation commit最终导致一个mutation调用     commit('INCREMENT')   },   decrement({commit}){     commit('DECREMENT')   },   // 带条件的action   incrementIfOdd({commit,state}){     // 提交一个mutation commit最终导致一个mutation调用     if(state.count %2 === 1){       commit('INCREMENT')     }   },   // 异步action   incrementAsync({commit}){     // 在action中可以直接执行异步代码     setTimeout(() => {       commit('INCREMENT')     },1000)   } } // 包含多个getter计算属性函数的对象 const getters = {   evenOrOdd (state) {     return state.count % 2 === 0 ? '偶数': '奇数'   } } // 以下都是固定的 export default new Vuex.Store({   state, // 状态   mutations, // 包含多个更新state函数的对象   actions, // 包含多个对应事件回调函数的对象   getters // 包含多个getter计算属性函数的对象 })

main.js. 引入store对象

/* 入口JS  */ import Vue from 'vue' import App from './App.vue' import store from './store' // 创建vm /* eslint-disable no-new */ new Vue({   el: '#app',   components: {App}, // 映射组件标签   template: '', // 指定需要渲染到页面的模板   store  // 会产生 $store对象，有state，getter属性。 })

App.vue

从上面可以看出，App.cue变得异常简单。很多逻辑都迁移到了store.js

今后，如果store.js比较多，可能也会将

state, // 状态   mutations, // 包含多个更新state函数的对象   actions, // 包含多个对应事件回调函数的对象   getters

这四个定义放到多个文件中。分别去定义。

66.3 演示效果：

67 vuex：counter应用的vuex实战2

使用mapState, mapGetters, mapActions简化映射：

App.vue：

当回调函数跟action的函数名不一致时，可以用以下方法做对照：

比如：

store.js改为

const getters = {   evenOrOdd2 (state) {     return state.count % 2 === 0 ? '偶数': '奇数'   } }

App.vue的mapGetters改为：

...mapGetters({evenOrOdd: 'evenOrOdd2'}) //后面是getters的名字，前面是app中回调函数的名字

执行效果如下：

跟前面的一致。

68 vuex结构图

backend api：后台api

在action可以发送后台请求，跟后台交互

devtools: chrome开发工具

监视者mutation的调用。

我们将具体的vuex结构图完善一下:

、

69 vuex版本的todolist——创建结构

70 vuex版本的todolist——header组件

71 vuex版本的todolist——list和item组件

72 vuex版本的todolist——footer组件

实战配置：

vuex用来管理多组件共享的状态。

分析：

todos状态数据应该放入到vuex的store中。

真实项目：拆分成多个模块

App.vue

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

store/state.js

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

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/actions.js

// 接收xxx.vue的组件通知，触发mutation。js调用间接更新状态的方法的对象 import { ADD_TODO,DELETE_TODO,SELECT_ALL_TODOS,CLEAR_ALL_COMPLETED } from './mutation-types' 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)   } }

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   } }

stores/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

stores/mutation.js

/*   包含多个由action触发，直接更新状态方法的对象  */ import {ADD_TODO,DELETE_TODO,SELECT_ALL_TODOS,CLEAR_ALL_COMPLETED} 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)   } } // 从组件开始，到action，到mutation，再更新状态

components/TodoHeader.vue

components/TodoList.vue

components/TodoItem.vue

components/TodoFooter.vue

实战效果：

新增后：

删除：

清除已完成：

（待续）

JavaScript web前端 Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。