商品表格--删除功能
点击删除按钮删除数据
分析：
- 删除按钮绑定点击事件
- 作用域插槽绑定id出来
- 传给删除方法，删除MyGoodList.vue里数组的数据
MyGoodList.vue---注册点击事件
<van-button type="primary" @click="removeBtn(row.id)"
>删除</van-button>
MyGoodList.vue 根据id删除
methods:{
removeBtn(id) {
// 1 根据id查找下标
let index = this.list.findIndex((obj) => obj.id === id)
// 2 实现删除
this.list.splice(index, 1)
},
}
商品表格---添加tab
需求:点击tab按钮，出现输入框自动获取焦点，失去焦点关闭输入框，会出新增tag，esc清空内容
- 点击tab，按钮消失，输入框出现
- 输入框自动获焦
- 失去焦点，输入框消失，按钮出现
- 检测输入框回车，无数据拦截
- 输入框取消，清空数据
- 检测输入框回车，有数据添加
点击tab，按钮消失，输入框出现
<div class="top">
<van-field
v-model="value"
v-if="row.inputVisible"
placeholder="请输入tab内容"
/>
<van-button v-else @click="row.inputVisible = true" type="info"
>tag+</van-button
>
</div>
输入框自动获焦
<van-field
v-model="value"
v-if="row.inputVisible"
placeholder="请输入tab内容"
:autofocus="true"
/>
失去焦点，输入框消失，按钮出现
<van-field
v-model="value"
v-if="row.inputVisible"
placeholder="请输入tab内容"
:autofocus="true"
@blur="row.inputVisible = false"
/>
输入框回车新增tag
1：监听input的回车事件
<van-field
v-model="row.inputValue"
v-if="row.inputVisible"
placeholder="请输入tab内容"
:autofocus="true"
@blur="row.inputVisible = false"
@keydown.enter="enterFn(row)"
/>
2.事件处理函数
// 新增tag
enterFn(row) {
// console.log(row, 0)
// 非空判断
if (row.inputValue.trim().length === 0) {
return alert('请输入数据')
}
// 添加
row.tags.push(row.inputValue)
row.inputValue = ''
},
input框 esc清空内容
@keydown.esc="row.inputValue = ''"
Vuex基础--介绍
为什么会有vuex？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
Vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题
结论：
- 修改state状态必须通过mutations
- mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
- 执行异步代码，通过actions，然后将数据提交给mutations才可以完成
- state的状态即共享数据可以在组件中引用
- 组件中可以调用aciton
Vuex使用
下载
yarn add vuex@3.5.1
src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({})
export default store
main.js引入
import store from './store/index'
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app')
Vuex--state
state 放置所有公共状态的属性，如果你有一个公共状态数据，你只需要定义在state对象中
定义state
// 初始化vuex对象
const store = new Vuex.Store({
state: {
// 管理数据
count: 0,
},
})
如何在组件中获取count？
原始形式--插值表达式
Good.vue
组件中可以使用this.$store 获取到vuex中的store对象实例，可通过state属性获取count
<div>state的数据{{ $store.state.count }}</div>
<script>
export default {
created() {
console.log(this.$store.state.count)
},
}
</script>
辅助函数--mapState
mapState是辅助函数，帮助我们把store中的数据映射到组件的计算属性中，属于一种方便用法
List.vue
第一步：导入mapState
第二步：采用数组形式引入state属性
第三部：利用展开运算法将导出的状态映射给计算属性
<template>
<div>
list
{{ count }}
</div>
</template>
<script>
//导入mapState
import { mapState } from 'vuex'
export default {
//采用数组形式引入state属性
//利用展开运算法将导出的状态映射给计算属性
computed: {
...mapState(['count']),
// 类似于
// count() {
// return this.$store.state.count
// },
},
}
</script>
vuex--mutations
state数据的修改只能通过mutatons，并且mutations必须是同步更新，目的是形成数据快照
数据快照：一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步
定义mutations
con
st store = new Vuex.Store({
state: {
// 管理数据
count: 70,
},
// d定义mutations
mutations: {
}
})
mutations是一个对象，对象中存放修改state的方法
mutations: {
// 方法里的参数 第一个参数是当前store的state属性
// 第二个参数payload 运输参数 调用mutations的时候 可以传递参数
addCount(state) {
state.count += 1
},
addCountN(state, n) {
state.count += n
},
},
如何在组件中调用mutations？
原始形式 $store
Good.vue
<template>
<div>
state的数据{{ $store.state.count }}
<hr />
<button @click="addCount">+1</button>
</div>
</template>
<script>
export default {
created() {
console.log(this.$store.state.count)
},
methods: {
addCount() {
// 调用store中的mutations 提交给mutations
// commit('mutations方法名',参数)
this.$store.commit('addCount')
},
},
}
</script>
带参数的传递
<button @click="addCountN(9)">+n</button>
methods: {
addCountN(n) {
this.$store.commit('addCountN', n)
},
},
辅助函数-mapMutations
mapMutations和mapState很像，把位于mutations中的方法提取出来，可以将它导入到methods中
<template>
<div>
list
{{ count }}
<button @click="addCount">+1</button>
<button @click="addCountN(8)">+n</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState(['count']),
// 类似于
// count() {
// return this.$store.state.count
// },
},
methods: {
// 把位于mutations中的方法提取出来，可以将它导入到methods中
...mapMutations(['addCount', 'addCountN']),
},
}
</script>
vuex-actions
state是存放数据的，mutations是同步更新数据，actions是负责进行异步操作
定义actions
actions: {
// 获取异步的数据 context 表示当前的store实例
// 可以通过context.state 获取状态
// 也可以通过context.commit 来提交mutations
// 也可以context.dispatch调用其它的action
getAsyncCount(context) {
setTimeout(() => {
// 1秒后，要去修改state
context.commit('addCount')
}, 1000)
},
},
原始调用--$store.dispatch
addAsyncCount() {
this.$store.dispatch('getAsyncCount')
},
传参函数
-
actions
actions: { getAsyncCountN(context, n) { setTimeout(() => { // 1秒后，要去修改state context.commit('addCountN', n) }, 1000) }, }, -
调用
<button @click="addAsyncCountN(6)">+nAsync</button> addAsyncCountN(m) { this.$store.dispatch('getAsyncCountN', m) },
辅助函数--mapActions
actions也有辅助函数，可以将action导入到组件中
<template>
<div>
list
{{ count }}
<button @click="getAsyncCount">+1Async</button>
<button @click="getAsyncCountN(6)">+nAsync</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState(['count']),
// 类似于
// count() {
// return this.$store.state.count
// },
},
methods: {
...mapActions(['getAsyncCount', 'getAsyncCountN']),
},
}
</script>
vuex-getters
除了state之外，有时还需要从state中派生出一些状态，这些状态是依赖state的，会用到getters
state中定义了list,是1~10的数组
state: {
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
},
组件中需要显示大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它
定义getters
getters: {
// getters函数第一个参数是state
// 必须要有返回值
filterList: (state) => state.list.fiter((item) => item > 5),
},
原始方式--getters
<ul>
<li v-for="(item, index) in $store.getters.filterList">
{{ item }}
</li>
</ul>
辅助函数--mapGetters
<template>
<div>
list
{{ count }}
<ul>
<li v-for="(item, index) in filterList" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['filterList']),
}
}
</script>
\
