1.编辑页面和添加页面一致 所以 就不用单独去写新的编辑静态页面
2-1:编辑事件
// 编辑
handleEdit(index, row) {
console.log(index, row);
// 存储当前行的数据 --vuex---跳转到另外一个界面--获取vuex行数据
this.changeRowData()
// 跳转编辑界面---
this.$router.push('/product/add-product')
},
2-2:创建一个product.js
页面存储当前商品信息数据
// 存储当前的商品信息数据
export default{
namespaced:true,
// 它可以被看作是Vue组件中的data属性
state:{
rowData:{},//当前行的数据容器
},
// Mutation是修改State最直接的方法
mutations:{
changeRowData(state,payload){//payload参数
state.rowData = payload
}
}
}
2-3:在vuex页面导入这个页面并注册这个页面
import Vue from 'vue'
import Vuex from 'vuex'
import product from './modules/product'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
// 注册模块
modules: {
product,
}
})
2-4:在编辑页面导入这个vuex
import {mapMutations} from 'vuex'
//从index页面把这个模块引进来这个方法
...mapMutations('product',['changeRowData']),
2-5:操作编辑跳转到新的页面
// 编辑
handleEdit(index, row) {
console.log(index, row);
// 存储当前行的数据 --vuex---跳转到另外一个界面--获取vuex行数据
this.changeRowData(row)
// 跳转编辑界面---
this.$router.push('/product/addProduct-page')
},
这个时候可以拿到添加页面了 ,下一步进行读数据,显示数据
2-6:读数据从添加页面用辅助函数读取,一加载页面就显示数据就使用到created
1、先导入vuex
import {mapState} from 'vuex'
2.使用辅助函数
computed: {
...mapState('product', ['rowData', 'title'])
},
3.进入页面就显示当前行数据(先在声明周期读)
created(){
this.ruleForm= this.rowData
},
注意事项:
1.这个添加是动态的不能写死,点击添加就显示商品添加,点击编辑就是商品编辑
解决:
1.在vuex里边定义一个初始值title和一个定义一个title方法
// 存储当前的商品信息数据
export default{
namespaced:true,
// 它可以被看作是Vue组件中的data属性
state:{
rowData:{},//当前行的数据容器
title:'添加',//标题
},
// Mutation是修改State最直接的方法
mutations:{
changeRowData(state,payload){//state:上方的数据; payload:参数
state.rowData = payload
},
changeTitle(state,title){
state.title = title ;//title等于任意形参
}
}
}
2.在编辑和添加直接赋值
...mapMutations('product',['changeRowData','changeTitle']),//从index页面把这个模块引进来这个方法
2.这个时候编辑能正常访问当前行数据但添加页面也出现当前行数据:那就根据title做一个判断 等于编辑的时候就显示数据
computed: {
...mapState('product', ['rowData', 'title'])
},
created(){
if(this.title == '编辑') {
this.ruleForm= this.rowData
}
},
这个时候一般的都可以正常编辑了(除图片和富文本框不能)