实验5：Vuex状态管理

Web前端开发技术课程实验报告

实验5：Vuex状态管理

一、实验目的：

掌握Vuex的工作原理和5个核心概念。
掌握Vuex API接口的使用方法。

二、实验要求：

掌握mutations、actions、getters的定义和使用方法，完成以下实验内容。
上交实验报告电子文档。文档包含源程序，以班级、学号后两位、姓名依次出现组成的字符串如“计算机20-1班01张三实验5” 标识。各班学委收齐本班本次实验后进行打包（打包文件为.rar或.zip类型），使用名称如“1班Web前端开发技术实验5”提交。

三、实验内容：

1. 模拟购物。如图所示，点击“加入购物车”可将相应物品放入购物车，并显示页面购物车中商品数量。

2. 模拟待办事项提醒。如图所示，在输入框中输入计划如“上午10点有课”，点击“+”可增加待计划；点击计划下方按钮，可显示当前计划和显示全部计划，点击“×”可删除全部计划。

四、实验过程中遇到的问题及解决手段：

1.报错如图1

图1

解决方法：数组是用push添加元素如图2，把put改成push即可

图2

五、实验结果和源码

1、实验1

1.1实验结果如图3、图4

图3

图4

1.2实验源码

Components的Count.vue

<div>

<h1>购物车商品数量：{{$store.state.cart.length}}</h1>

<hr/>

{{s}}<button @click="Addgoods(s)">加入购物车</button>

</div>

{{c}}<br/>

</div>

</div>

</template>

export default {

name:'Count',

data() {

return {

shangpin:["华为Mate40 Pro","iphone 12 pro","小米11 Ultra","vivo S9"]

}

methods: {

Addgoods(s){

this.$store.dispatch('jiaOdd',s)

mounted() {

console.log('Count',this)

}

</script>

button{

margin-left: 5px;

}

#p1{

width:300px;

height:auto;

float:left;

display:inline;

}

#p2{

width:300px;

height:auto;

float:left;

display:inline;

border: 1px dashed black;

background-color: rgb(211, 210, 210);

}

</style>

Store/index.js

//该文件用于创建Vuex中最为核心的store

import Vue from 'vue'

//引入Vuex

import Vuex from 'vuex'

//应用Vuex插件

Vue.use(Vuex)

//准备actions——用于响应组件中的动作

const actions = {

jiaOdd(context,value){

console.log('actions中的jiaOdd被调用了')

context.commit('JIA',value)

}

//准备mutations——用于操作数据（state）

const mutations = {

JIA(state,value){

console.log('mutations中的JIA被调用了');

state.cart.push(value)

}

//准备state——用于存储数据

const state = {

cart:[] //当前的和

}

//创建并暴露store

export default new Vuex.Store({

actions,

mutations,

state,

})

App.vue

<div>

</div>

</template>

import Count from './components/Count'

export default {

name:'App',

components:{Count},

mounted() {

// console.log('App',this)

}

</script>

main.js

//引入Vue

import Vue from 'vue'

//引入App

import App from './App.vue'

//引入插件

import vueResource from 'vue-resource'

//引入store

import store from './store'

//关闭Vue的生产提示

Vue.config.productionTip = false

//使用插件

Vue.use(vueResource)

//创建vm

new Vue({

el:'#app',

render: h => h(App),

store,

beforeCreate() {

Vue.prototype.$bus = this

}

})

2.实验2

2.2实验结果如图5、图6、图7

图5

图6

图7

2.2实验源码

MyFooter.vue

<label>

</label>

<span>

<span>已完成{{doneTotal}}</span> / 全部{{total}}

</span>

<button class="btn btn-danger" @click="clearAll">清除已完成任务</button>

</div>

</template>

export default {

name:'MyFooter',

props:['todos'],

computed: {

//总数

total(){

return this.todos.length

//已完成数

doneTotal(){

//此处使用reduce方法做条件统计

/* const x = this.todos.reduce((pre,current)=>{

console.log('@',pre,current)

return pre + (current.done ? 1 : 0)

},0) */

//简写

return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)

//控制全选框

isAll:{

//全选框是否勾选

get(){

return this.doneTotal === this.total && this.total > 0

//isAll被修改时set被调用

set(value){

// this.checkAllTodo(value)

this.$emit('checkAllTodo',value)

}

methods: {

/* checkAll(e){

this.checkAllTodo(e.target.checked)

} */

//清空所有已完成

clearAll(){

// this.clearAllTodo()

this.$emit('clearAllTodo')

}

</script>

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

Myheader.vue

</div>

</template>

import {nanoid} from 'nanoid'

export default {

name:'MyHeader',

data() {

return {

//收集用户输入的title

title:''

}

methods: {

add(){

//校验数据

if(!this.title.trim()) return alert('输入不能为空')

//将用户的输入包装成一个todo对象

const todoObj = {id:nanoid(),title:this.title,done:false}

//通知App组件去添加一个todo对象

this.$emit('addTodo',todoObj,1,2,3)

//清空输入

this.title = ''

}

</script>

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

Myitem.vue

<li>

<label>

<span v-show="!todo.isEdit">{{todo.title}}</span>

<input

type="text"

v-show="todo.isEdit"

:value="todo.title"

@blur="handleBlur(todo,$event)"

ref="inputTitle"

</label>

</li>

</template>

import pubsub from 'pubsub-js'

export default {

name:'MyItem',

//声明接收todo

props:['todo'],

methods: {

//勾选or取消勾选

handleCheck(id){

//通知App组件将对应的todo对象的done值取反

// this.checkTodo(id)

this.$bus.$emit('checkTodo',id)

//删除

handleDelete(id){

if(confirm('确定删除吗？')){

//通知App组件将对应的todo对象删除

// this.deleteTodo(id)

// this.$bus.$emit('deleteTodo',id)

pubsub.publish('deleteTodo',id)

}

//编辑

handleEdit(todo){

if(todo.hasOwnProperty('isEdit')){

todo.isEdit = true

}else{

// console.log('@')

this.$set(todo,'isEdit',true)

}

this.$nextTick(function(){

this.$refs.inputTitle.focus()

})

//失去焦点回调（真正执行修改逻辑）

handleBlur(todo,e){

todo.isEdit = false

if(!e.target.value.trim()) return alert('输入不能为空！')

this.$bus.$emit('updateTodo',todo.id,e.target.value)

}

</script>

/*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;

}

li:hover{

background-color: #ddd;

}

li:hover button{

display: block;

}

</style>

Mylist.vue

<transition-group name="todo" appear>

<MyItem

v-for="todoObj in todos"

:key="todoObj.id"

:todo="todoObj"

</transition-group>

</ul>

</template>

import MyItem from './MyItem'

export default {

name:'MyList',

components:{MyItem},

//声明接收App传递过来的数据

props:['todos']

}

</script>

/*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;

}

.todo-enter-active{

animation: atguigu 0.5s linear;

}

.todo-leave-active{

animation: atguigu 0.5s linear reverse;

}

@keyframes atguigu {

from{

transform: translateX(100%);

}

to{

transform: translateX(0px);

}

</style>

App.vue

</div>

</template>

import pubsub from 'pubsub-js'

import MyHeader from './components/MyHeader'

import MyList from './components/MyList'

import MyFooter from './components/MyFooter'

export default {

name:'App',

components:{MyHeader,MyList,MyFooter},

data() {

return {

//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）

todos:JSON.parse(localStorage.getItem('todos')) || []

}

methods: {

//添加一个todo

addTodo(todoObj){

this.todos.unshift(todoObj)

//勾选or取消勾选一个todo

checkTodo(id){

this.todos.forEach((todo)=>{

if(todo.id === id) todo.done = !todo.done

})

//更新一个todo

updateTodo(id,title){

this.todos.forEach((todo)=>{

if(todo.id === id) todo.title = title

})

//删除一个todo

deleteTodo(_,id){

this.todos = this.todos.filter( todo => todo.id !== id )

//全选or取消全选

checkAllTodo(done){

this.todos.forEach((todo)=>{

todo.done = done

})

//清除所有已经完成的todo

clearAllTodo(){

this.todos = this.todos.filter((todo)=>{

return !todo.done

})

}

watch: {

todos:{

deep:true,

handler(value){

localStorage.setItem('todos',JSON.stringify(value))

}

mounted() {

this.$bus.$on('checkTodo',this.checkTodo)

this.$bus.$on('updateTodo',this.updateTodo)

this.pubId = pubsub.subscribe('deleteTodo',this.deleteTodo)

beforeDestroy() {

this.$bus.$off('checkTodo')

this.$bus.$off('updateTodo')

pubsub.unsubscribe(this.pubId)

}

</script>

<style>

/*base*/

body {

background: #fff;

}

.btn {

display: inline-block;

padding: 4px 12px;

margin-bottom: 0;

font-size: 14px;

line-height: 20px;

text-align: center;

vertical-align: middle;

cursor: pointer;

box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

border-radius: 4px;

}

.btn-danger {

color: #fff;

background-color: #da4f49;

border: 1px solid #bd362f;

}

.btn-edit {

color: #fff;

background-color: skyblue;

border: 1px solid rgb(103, 159, 180);

margin-right: 5px;

}

.btn-danger:hover {

color: #fff;

background-color: #bd362f;

}

.btn:focus {

outline: none;

}

.todo-container {

width: 600px;

margin: 0 auto;

}

.todo-container .todo-wrap {

padding: 10px;

border: 1px solid #ddd;

border-radius: 5px;

}

</style>

Main.js

//引入Vue

import Vue from 'vue'

//引入App

import App from './App.vue'

//关闭Vue的生产提示

Vue.config.productionTip = false

//创建vm

new Vue({

el:'#app',

render: h => h(App),

beforeCreate() {

Vue.prototype.$bus = this

})

五、本次实验的体会（结论）：

通过这次实验我掌握了Vuex的工作原理和5个核心概念，掌握了Vuex API接口的使用方法。同时明白了只有自己亲自动手去编写程序才能把书本的内容与实际结合起来，才能更容易的把知识牢记于心。在动手真正的去编程往往会发生各种各样的问题，如果不去实践就会永远堆积问题，停滞不前，就会落后。编程需要沉淀，不能急功近利，欲速则不达，花时间打好基础，基础不牢地动山摇。