前端vue入门(纯代码)24_Modules

news2024/9/23 23:31:48

穷不怪父，苦不责妻，方为真男人！

【23.Vuex中的模块化和命名空间】

[可以去官网看看Vuex3文档](Module | Vuex (vuejs.org))

  • 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
  • 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
  • modules模板如下：
const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

//创建并暴露store
export default new Vuex.Store({
	// property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)
	modules: {
    a:moduleA,
    b:moduleB,
  },
});

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

  • （1）我们看一下模块A【modulesCount】中的计算属性getters里的属性bigSum(state, getters,rootstate,rootgetters) 可以传递的四个参数：

const modulesCount = {
    getters: {
    // 这里的 `state` 对象是modulesCount的局部状态
		bigSum(state, getters,rootstate,rootgetters) {
			console.log('getters第一个参数：',state);
			console.log('getters第二个参数：',getters);
			console.log('getters第三个参数：',rootstate);
			console.log('getters第四个参数：',rootgetters);
			return state.sum * 10;
		},
	},
}

打印结果展示：

  • （2）我们看一下,我们如何在组件Person中使用模块B【modulesPerson】中的状态属性state里的属性personLists 

const modulesPerson = {
	state: {
		personLists: [{ id: '001', name: '伍六七' }],
	},
}

Person组件中：

computed: {
    // 完整版代码
    personLists() {
        return this.$store.state.modulesPerson.personLists;
    },
    sum() {
        return this.$store.state.modulesCount.sum;
    },
    // 简写
/* 		...mapState('modulesPerson',['personLists']),
    ...mapState('modulesCount',[ 'sum']), */
},

  • 1.【解释：this.$store.state.modulesPerson.personLists】:我们看到（1）中的第三个参数，可以发现，模块A和模块B都放在根节点的state中【rootstate】，然后，再去存放数据的模块中去寻找自己需要的数据。

  • 2.【解释：...mapState('modulesPerson',['personLists'])】:传递的两个参数，第一个参数：哪一个模块A或B；第二个参数，store中state的映射。

  • （3）我们看一下,我们如何在组件Person中使用模块B【modulesPerson】中的mutations里方法addPerson 

const modulesPerson = {
      mutations: {
		// 添加人员信息
		addPerson(state, value) {
			console.log('mutations中的addPerson被调用了');
			console.log('addPerson', value);
			// array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。
			state.personLists.unshift(value);
		},
	  },
}

Person组件中：

<input type="text" placeholder="请输入名字" v-model="iptName" />
<button @click="addPerson">添加</button>

import {nanoid} from 'nanoid';
export default {
	name: 'Person',
	data() {
		return {
			iptName: '',
		};
	},
	methods: {
		addPerson() {
			const personObj = {id:nanoid(),name:this.iptName}
            this.$store.commit('modulesPerson/addPerson', personObj)
            // 然后清空input框
             this.iptName=''
		},
	},
};

  • 1.【解释：this.$store.commit('modulesPerson/addPerson', personObj)】:我们看到该代码中commit(‘第一个参数’，第二个参数)，

    • 第一个参数：必须要带上路径，即你调用的方法是在哪一个模块的mutations中【开启命名空间后，即namespaced:true】。

      【比如commit('modulesPerson/addPerson', personObj)：此处就是，调用模块modulesPerson中mutations里的addPerson方法。】

    • 第二个参数：要传递的数据。

  • （4）我们看一下,我们如何在组件Count中使用模块A【modulesCount】中的actions里方法jiaOdd 

const modulesCount = {
	actions: {
		jiaOdd(context, value) {
			console.log('actions中的jiaOdd被调用了');
			// 这里可以访问到state里存储的数据 sum
			if (context.state.sum % 2) {
				context.commit('JIA', value);
			}
		},
	},
}

Count组件中：

<button @click="incrementOdd(n)">当前求和为奇数再加</button>

import { mapGetters, mapState, mapMutations, mapActions } from 'vuex';
export default {
	name: 'Count',
	methods: {
        //**********完整版写法************** */
		incrementOdd(n) {
			this.$store.dispatch('modulesCount/jiaOdd',n);
		},
		//**********借助mapActions方法****************
		//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
		...mapActions('modulesCount',{ incrementOdd: 'jiaOdd'}),

		//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
		// ...mapActions(['jiaOdd'])
	},
};

  • 1.【解释：...mapActions('modulesCount',{ incrementOdd: 'jiaOdd'}),】:完整版代码如下

    incrementOdd(n) {
    this.$store.dispatch('modulesCount/jiaOdd',n);
},

    • 第一个参数：必须要带上路径，即你调用的方法是在哪一个模块的actions中【开启命名空间后，即namespaced:true】。

      【比如dispatch('modulesCount/jiaOdd',n)：此处就是，调用模块modulesCount中actions里的jiaOdd方法。】

    • 第二个参数：要传递的数据。

【补充1namespaced: true 】: 使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

目前页面展示：

vuex模块化编码：

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue';
//引入Vuex
import Vuex from 'vuex';
import modulesCount from "./count";
import modulesPerson from "./person";
//应用Vuex插件
Vue.use(Vuex);


//创建并暴露store
export default new Vuex.Store({
	// property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)
	modules: {
    modulesCount,
    modulesPerson,
  },
});

store/count.js

export default {
  namespaced: true,
	state: {
		sum: 0, //当前的和
		Sname: '伍六七',
		Sjob: '理发师',
	},
	mutations: {
    // 这里的 `state` 对象是modulesCount的局部状态
		JIA(state, value) {
			console.log('mutations中的JIA被调用了');
			state.sum += value;
		},

		JIAN(state, value) {
			console.log('mutations中的JIAN被调用了');
			state.sum -= value;
		},
	},
	actions: {
		jiaOdd(context, value) {
			console.log('actions中的jiaOdd被调用了');
			// 这里可以访问到state里存储的数据 sum
			if (context.state.sum % 2) {
				context.commit('JIA', value);
			}
		},

		jiaWait(context, value) {
			console.log('actions中的jiaWait被调用了');
			setTimeout(() => {
				context.commit('JIA', value);
			}, 500);
		},
	},
	getters: {
    // 这里的 `state` 对象是modulesCount的局部状态
		bigSum(state, getters,rootstate) {
			console.log('getters第一个参数：',state);
			console.log('getters第二个参数：',getters);
			console.log('getters第三个参数：',rootstate);
			return state.sum * 10;
		},
	},
};

store/person.js

export default {
  namespaced: true,
	state: {
		personLists: [{ id: '001', name: '伍六七' }],
	},
	mutations: {
		// 添加人员信息
		addPerson(state, value) {
			console.log('mutations中的addPerson被调用了');
			console.log('addPerson', value);
			// array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。
			state.personLists.unshift(value);
		},
	},
	actions: {},
	getters: {},
};

App.vue

<template>
	<div>
		<Count/>
    <br/>
    <Person/>
	</div>
</template>

<script>
	import Count from './components/Count'
	import Person from './components/Person'
	export default {
		name:'App',
		components:{Count,Person},
		mounted() {
			// console.log('App',this)
		},
	}
</script>

Count.vue

<template>
	<div>
		<h1>当前求和为：{{ sum }}</h1>
		<h3>当前求和放大10倍为：{{ bigSum }}</h3>
		<h3>我叫{{ Sname }},是一名{{ Sjob }}</h3>
		<h3 style="color: red">
			Person组件的总人数是：{{ personLists.length }}
		</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
import { mapGetters, mapState, mapMutations, mapActions } from 'vuex';
export default {
	name: 'Count',
	data() {
		return {
			n: 1, //用户选择的数字
		};
	},
	computed: {
		//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
		...mapGetters('modulesCount', ['bigSum']),
		//借助mapState生成计算属性，从state中读取数据。（数组写法）
		...mapState('modulesCount', ['sum', 'Sjob', 'Sname']),
		...mapState('modulesPerson', ['personLists']),
	},
	methods: {
		//**********借助mapMutations方法****************
		//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
		...mapMutations('modulesCount', {
			increment: 'JIA',
			decrement: 'JIAN',
		}),
		//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
		// ...mapMutations([ 'JIA', 'JIAN' ]),

    //**********完整版写法************** */
		incrementOdd(n) {
			this.$store.dispatch('modulesCount/jiaOdd',n);
		},
		//**********借助mapMutations方法****************
		//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
		...mapActions('modulesCount', {
			// incrementOdd: 'jiaOdd',
			incrementWait: 'jiaWait',
		}),

		//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
		// ...mapActions(['jiaOdd','jiaWait'])
	},
	mounted() {
		console.log('Count', this.$store);
	},
};
</script>

<style scoped>
button {
	margin-left: 10px;
}
select {
	margin-left: 20px;
}
</style>

Person.vue

<template>
	<div>
		<h1>人员列表</h1>
		<h3 style="color: red">Count组件求和为：{{ sum }}</h3>
		<input type="text" placeholder="请输入名字" v-model="iptName" />
		<button @click="addPerson">添加</button>
		<ul>
			<li v-for="p in personLists" :key="p.id">{{ p.name }}</li>
		</ul>
	</div>
</template>

<script>
// import { mapState } from 'vuex';
import {nanoid} from 'nanoid';
export default {
	name: 'Person',
	data() {
		return {
			iptName: '',
		};
	},
	computed: {
		// 完整版代码
			personLists() {
			return this.$store.state.modulesPerson.personLists;
		},
		sum() {
			return this.$store.state.modulesCount.sum;
		},
		// 简写
/* 		...mapState('modulesPerson',['personLists']),
		...mapState('modulesCount',[ 'sum']), */
	},
	methods: {
		addPerson() {
			const personObj = {id:nanoid(),name:this.iptName}
      this.$store.commit('modulesPerson/addPerson', personObj)
      // 然后清空input框
      this.iptName=''
		},
	},
};
</script>

我们添加1个需求：输入框中添加的名字，必须姓:‘鸡’,如图所示。

1.第一种写法：在Person.vue中

<button @click="addPersonJi">添加一个姓鸡的</button>

methods: {
    addPersonJi() {
        if (this.iptName.indexOf('鸡')===0) {
            const personObj = { id: nanoid(), name: this.iptName };
            this.$store.commit('modulesPerson/addPerson', personObj);
            // 然后清空input框
            this.iptName = '';
        } else {
            this.iptName = '';
            alert('请输入姓鸡的名字')
        }
    },
},

2.第二种写法：在模块modulesPerson的mutations中

mutations: {
    addPersonJi(state, value) {
	console.log('mutations中的addPersonJi被调用了');
			// array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。
      if (value.name.indexOf('鸡')===0) {
          state.personLists.unshift(value);
				// 然后清空input框
	  } else {
          alert('请输入姓鸡的名字')
		}
	},
},

而Person.vue中

methods: {
    addPersonJi() {
        const personObj = { id: nanoid(), name: this.iptName };
        this.$store.commit('modulesPerson/addPersonJi', personObj);
        // 然后清空input框
        this.iptName = '';
    },
},

3.第三种写法：在模块modulesPerson的actions中,最好不要直接修改state里面的数据；最好是去调用commit方法，在mutations里修改state对的数据。

mutations: {
    // 添加人员信息
    addPerson(state, value) {
        console.log('mutations中的addPerson被调用了');
        console.log('addPerson', value);
        // array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。
        state.personLists.unshift(value);
    },
},
actions: {
   addPersonJi(context, value) {
       console.log('actions中的addPersonJi被调用了');
        // array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。
       if (value.name.indexOf('鸡')===0) {
            context.commit('addPerson',value)
        } else {
            alert('请输入姓鸡的名字')
        }
    },
},

而Person.vue中

methods: {
   addPersonJi() {
        const personObj = { id: nanoid(), name: this.iptName };
        this.$store.dispatch('modulesPerson/addPersonJi', personObj);
        // 然后清空input框
        this.iptName = '';
    },
},

我们添加1个按钮：利用axios.get()去调用后台api,去随机生成一句情话,如图所示。

情话文案
简介：随机生成一句情话文案

文档：http://txapi.cn/api_detail?id=1601207567931932672

请求方式：GET

调用地址：http://api.txapi.cn/v1/c/love_talk?token=Z1QljZOZiT4NTG

{
    "code": 200,
    "msg": "ok",
    "data": {
        "text": "当你真正爱上一个人，你会有一种很亲切的感觉，他让你觉的很舒服，你可以信任他、依靠他。他像是一个亲密的家人，甚至可以说，比一个家人更亲密，这是亲密加上一种温馨的感觉，就是亲爱的感觉。"
    },
    "time": 1670592587018
}

Person.vue

<button @click="addPersonRandom">随机生成一句情话</button>

methods: {
    addPersonRandom(){
      this.$store.dispatch('modulesPerson/addPersonRandom');
    },
},

modulesPerson模块中

actions: {
    addPersonRandom(context) {
        axios.get('http://api.txapi.cn/v1/c/love_talk?token=Z1QljZOZiT4NTG').then(
    // 获取数据成功
    Response => {
      const personRandom = {id:nanoid(),name:Response.data.data}
      context.commit('addPerson',personRandom)
    },
    // 获取数据失败，打印失败原因
    error => {console.log(error.message);}
    );
    },
},
mutations: {
    // 添加人员信息
    addPerson(state, value) {
        console.log('mutations中的addPerson被调用了');
        console.log('addPerson', value);
        // array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。
        state.personLists.unshift(value);
    },
	},

整个vuex模块化的完整编码：

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue';
//引入Vuex
import Vuex from 'vuex';
import modulesCount from "./count";
import modulesPerson from "./person";
//应用Vuex插件
Vue.use(Vuex);


//创建并暴露store
export default new Vuex.Store({
	// property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)
	modules: {
    modulesCount,
    modulesPerson,
  },
});

store/count.js

export default {
  namespaced: true,//开启命名空间
	state: {
		sum: 0, //当前的和
		Sname: '伍六七',
		Sjob: '理发师',
	},
	mutations: {
    // 这里的 `state` 对象是modulesCount的局部状态
		JIA(state, value) {
			console.log('mutations中的JIA被调用了');
			state.sum += value;
		},

		JIAN(state, value) {
			console.log('mutations中的JIAN被调用了');
			state.sum -= value;
		},
	},
	actions: {
		jiaOdd(context, value) {
			console.log('actions中的jiaOdd被调用了');
			// 这里可以访问到state里存储的数据 sum
			if (context.state.sum % 2) {
				context.commit('JIA', value);
			}
		},

		jiaWait(context, value) {
			console.log('actions中的jiaWait被调用了');
			setTimeout(() => {
				context.commit('JIA', value);
			}, 500);
		},
	},
	getters: {
    // 这里的 `state` 对象是modulesCount的局部状态
		bigSum(state, getters,rootstate,rootgetters) {
			console.log('getters第一个参数：',state);
			console.log('getters第二个参数：',getters);
			console.log('getters第三个参数：',rootstate);
			console.log('getters第四个参数：',rootgetters);
			return state.sum * 10;
		},
	},
};

store/person.js

//人员管理相关的配置
import axios from 'axios'
import { nanoid } from 'nanoid'

export default {
	namespaced: true, //开启命名空间
	state: {
		personLists: [{ id: '001', name: '伍六七' }],
	},
	mutations: {
		// 添加人员信息
		addPerson(state, value) {
			console.log('mutations中的addPerson被调用了');
			console.log('addPerson', value);
			// array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。
			state.personLists.unshift(value);
		},
	},
	actions: {
		addPersonJi(context, value) {
			console.log('actions中的addPersonJi被调用了');
			// array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。
			if (value.name.indexOf('鸡') === 0) {
				context.commit('addPerson', value);
			} else {
				alert('请输入姓鸡的名字');
			}
		},

		addPersonRandom(context) {
			axios.get('http://api.txapi.cn/v1/c/love_talk?token=Z1QljZOZiT4NTG').then(
        // 获取数据成功
        Response => {
          const personRandom = {id:nanoid(),name:Response.data.data}
          context.commit('addPerson',personRandom)
        },
        // 获取数据失败，打印失败原因
        error => {console.log(error.message);}
        );
		},
	},
	getters: {},
};

components/Count.vue

<template>
	<div>
		<h1>当前求和为：{{ sum }}</h1>
		<h3>当前求和放大10倍为：{{ bigSum }}</h3>
		<h3>我叫{{ Sname }},是一名{{ Sjob }}</h3>
		<h3 style="color: red">
			Person组件的总人数是：{{ personLists.length }}
		</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
import { mapGetters, mapState, mapMutations, mapActions } from 'vuex';
export default {
	name: 'Count',
	data() {
		return {
			n: 1, //用户选择的数字
		};
	},
	computed: {
		//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
		...mapGetters('modulesCount', ['bigSum']),
		//借助mapState生成计算属性，从state中读取数据。（数组写法）
		...mapState('modulesCount', ['sum', 'Sjob', 'Sname']),
		...mapState('modulesPerson', ['personLists']),
	},
	methods: {
		//**********借助mapMutations方法****************
		//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
		...mapMutations('modulesCount', {
			increment: 'JIA',
			decrement: 'JIAN',
		}),
		//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
		// ...mapMutations([ 'JIA', 'JIAN' ]),

    //**********完整版写法************** */
		incrementOdd(n) {
			this.$store.dispatch('modulesCount/jiaOdd',n);
		},
		//**********借助mapMutations方法****************
		//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
		...mapActions('modulesCount', {
			// incrementOdd: 'jiaOdd',
			incrementWait: 'jiaWait',
		}),

		//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
		// ...mapActions(['jiaOdd','jiaWait'])
	},
	mounted() {
		console.log('Count', this.$store);
	},
};
</script>

<style scoped>
button {
	margin-left: 10px;
}
select {
	margin-left: 20px;
}
</style>

components/Person.vue

<template>
	<div>
		<h1>人员列表</h1>
		<h3 style="color: red">Count组件求和为：{{ sum }}</h3>
		<input type="text" placeholder="请输入名字" v-model="iptName" />
		<button @click="addPerson">添加</button>
		<button @click="addPersonJi">添加一个姓鸡的</button>
		<button @click="addPersonRandom">随机生成一句情话</button>
		<ul>
			<li v-for="p in personLists" :key="p.id">{{ p.name }}</li>
		</ul>
	</div>
</template>

<script>
// import { mapState } from 'vuex';
import { nanoid } from 'nanoid';
export default {
	name: 'Person',
	data() {
		return {
			iptName: '',
		};
	},
	computed: {
		// 完整版代码
		personLists() {
			return this.$store.state.modulesPerson.personLists;
		},
		sum() {
			return this.$store.state.modulesCount.sum;
		},
		// 简写
		/* 		...mapState('modulesPerson',['personLists']),
		...mapState('modulesCount',[ 'sum']), */
	},
	methods: {
		addPerson() {
			const personObj = { id: nanoid(), name: this.iptName };
			this.$store.commit('modulesPerson/addPerson', personObj);
			// 然后清空input框
			this.iptName = '';
		},
		addPersonJi() {
			const personObj = { id: nanoid(), name: this.iptName };
			this.$store.dispatch('modulesPerson/addPersonJi', personObj);
			// 然后清空input框
			this.iptName = '';
		},
    addPersonRandom(){
      this.$store.dispatch('modulesPerson/addPersonRandom');
    },
	},
};
</script>

App.vue

<template>
	<div>
		<Count/>
    <br/>
    <Person/>
	</div>
</template>

<script>
	import Count from './components/Count'
	import Person from './components/Person'
	export default {
		name:'App',
		components:{Count,Person},
		mounted() {
			// console.log('App',this)
		},
	}
</script>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入vue-resource插件
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),
  // property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)
   // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  // 生命周期钩子beforeCreate中模板未解析，且this是vm
  beforeCreate() {
    // this:指的是vm
		Vue.prototype.$bus = this  //安装全局事件总线$bus
	}
})

总结：模块化+命名空间

  1. 目的：让代码更好维护，让多种数据分类更加明确。

  2. 修改store.js

    const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}

const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

  3. 开启命名空间后，组件中读取state数据：

    //方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

  4. 开启命名空间后，组件中读取getters数据：

    //方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

  5. 开启命名空间后，组件中调用dispatch

    //方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  6. 开启命名空间后，组件中调用commit

    //方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/732291.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SQLServer2005位安装教程(图解)

SQLServer2005位安装教程(图解)

进入下载的文件中，双击打开 ：splash.hta 文件进行安装 根据自己的系统来选择性进行安装，这里我们选择第二项：基于 x64 的操作系统(6)。 然后在安装中选择“服务器组件、工具、练级丛书和示例©”的选项进行安装。 此处的注册信息可以忽略，非必填选项
阅读更多...
第二章 模型评估和选择

第二章 模型评估和选择

文章目录 第二章 模型评估和选择2.1经验误差与过拟合2.2评估方法2.2.1留出法2.2.2交叉验证法2.2.3自助法2.2.4调参与最终模型 2.3性能度量2.3.1错误率与精度2.3.2查准率、查全率和F12.3.3ROC与AUC2.3.4代价敏感错误率与代价曲线 第二章 模型评估和选择 2.1经验误差与过拟合 通…
阅读更多...
Unity-3d小游戏开发-----走迷宫

Unity-3d小游戏开发-----走迷宫

本人是在学习完c&#xff0c;c&#xff0c;数据结构算法&#xff0c;操作系统网络这些基础的课程之后&#xff0c;打算学习自己喜欢的游戏开发方向的东西&#xff0c;然后在B站上自学了几天unity&#xff0c;用到unity的触发器&#xff0c;碰撞&#xff0c;刚体&#xff0c;以及…
阅读更多...
图像处理入门教程：从Python到Opencv

图像处理入门教程：从Python到Opencv

Python编程 这里主要针对有一定基础的读者&#xff0c;在Python编程中&#xff0c;掌握基础语法和数据类型是非常重要的。它们是构建程序的基石&#xff0c;是提供解决问题和开发应用的工具。在这里&#xff0c;我将简单介绍一些常用的语法和数据类型。 一、环境搭建 详细请…
阅读更多...
14 - 信号优先级与安全性

14 - 信号优先级与安全性

---- 整理自狄泰软件唐佐林老师课程 查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;Linux系统编程训练营 - 目录 文章目录 1. 信号优先级1.1 问题1.2 信号优先级的概念1.3 信号优先级实验设计1.3.1 发送端1.3.2 接收端1.3.3 编程实验&#xff1a;信号优先级实验 …
阅读更多...
普通索引VS唯一索引

普通索引VS唯一索引

查询性能 假设 我们有一列int 类型的value 对它进行查询 (VALUE无重复字段) SELECT value FROM table where value 8; 如过是普通索引 找到value 8 的记录后还会继续找&#xff0c;直到碰到第一个不满足 k5 条件的记录。 如过是唯一索引 找到value 8这条记录就不会往下找…
阅读更多...
百望股份高级PMO专家赵雅婧受邀为第十二届中国PMO大会演讲嘉宾

百望股份高级PMO专家赵雅婧受邀为第十二届中国PMO大会演讲嘉宾

百望股份有限公司项目管理部高级PMO专家赵雅婧女士受邀为由PMO评论主办的2023第十二届中国PMO大会演讲嘉宾&#xff0c;演讲议题&#xff1a;PMO的组织建设与持续运营。大会将于8月12-13日在北京举办&#xff0c;敬请关注&#xff01; 议题简要&#xff1a; 众所周知&#xff…
阅读更多...
图像全景拼接

图像全景拼接

TODO: 实现图片的全景拼接 流程&#xff1a; &#xff08;1&#xff09;检测左右2图片的SIFT关键特征点&#xff0c;并计算特征描述 &#xff08;2&#xff09;使用KNN检测来自左右2图的SIFT特征&#xff0c;进行匹配 &#xff08;3&#xff09;计算视角变换矩阵H&#xff0c…
阅读更多...
目标跟踪基础：距离度量

目标跟踪基础：距离度量

本文来自公众号“AI大道理” —————— 距离度量在CV 、NLP以及数据分析等领域都有众多的应用。 距离度量可以当做某种相似度&#xff0c;距离越近&#xff0c;越相似。 在目标跟踪领域中&#xff0c;需要判断目标之间的距离或相似度&#xff0c;从而判断前后帧的目标是否…
阅读更多...
Redis实战案例13-集群下的并发安全问题

Redis实战案例13-集群下的并发安全问题

在解决一人一单的问题上面&#xff0c;采用了悲观锁的方案&#xff0c;但是这种方案只适合单机情况&#xff0c;在集群的模式下就不适用了&#xff1b; 覆盖yaml文件中的端口号 修改nginx中conf&#xff0c;这样就可以反向代理到两个节点上去&#xff0c;轮询的负载均衡规则&am…
阅读更多...
git bash---打开当前路径所在文件夹

git bash---打开当前路径所在文件夹

0 Preface/Foreword 在Windows操作系统中使用git bash时&#xff0c;可以通过命令直接打开当前路径下的文件夹&#xff0c;命令如下 explorer .
阅读更多...
MS17-010漏洞复现

MS17-010漏洞复现

官方描述&#xff1a;Microsoft Security Bulletin MS17-010 - Critical | Microsoft Learn漏洞描述&#xff1a; Microsoft Windows SMB Server远程代码执行漏洞&#xff0c;Microsoft Server Message Block 1.0 (SMBv1)服务器处理某些请求时&#xff0c;在实现上存在远程代码…
阅读更多...
Mockplus Cloud - June 2023crack

Mockplus Cloud - June 2023crack

Mockplus Cloud - June 2023crack 添加便签以澄清情节提要上的任何设计概念。 新的流程图工具直接在情节提要上可视化任何设计流程和过程。 添加了在发布到Mockplus Cloud时删除RP页面的功能。 添加设计注释时包括图像和链接。 添加了一个新的提示&#xff0c;用于在断开互联网…
阅读更多...
MySQL练习题(1)

MySQL练习题(1)

1,创建如下学生表 mysql> create table student( -> id int, -> name varchar(20), -> gender varchar(20), -> chinese int, -> math int, -> english int -> ); 插入如图数据 1-- 查询表中所有学生的信息 select *from student;2-- 查询表中所有学…
阅读更多...
mysql语句练习题，创建表，枚举中文字符集设置，修改（update）

mysql语句练习题，创建表，枚举中文字符集设置，修改（update）

作业&#xff1a; 1.创建表&#xff1a; 创建员工表employee&#xff0c;字段如下&#xff1a; id&#xff08;员工编号&#xff09;&#xff0c;name&#xff08;员工名字&#xff09;&#xff0c;gender&#xff08;员工性别&#xff09;&#xff0c;salary&#xff08;员工薪…
阅读更多...
厄尔尼诺，“烤热”新能源汽车市场？

厄尔尼诺，“烤热”新能源汽车市场？

在高温极端天气中&#xff0c;买新能源汽车的人变多了还是变少了&#xff1f; 7月4日&#xff0c;世界气象组织宣布&#xff0c;热带太平洋七年来首次形成厄尔尼诺条件&#xff0c;这可能导致全球气温飙升、破坏性天气和气候模式的出现。 注&#xff1a;1月底至6月初&#xff…
阅读更多...
【离散数学】实践二 Floyd– Warshall算法

【离散数学】实践二 Floyd– Warshall算法

文章目录 目标原理设计与实现&#xff08;代码快照以及代码&#xff09;运行界面和结果截图结语 目标 给定一个距离矩阵&#xff0c;利用 Floyd– Warshall 算法编程&#xff08;C语言&#xff09;求任意两点之间的最短距离。 原理 求取多源最短路径常用Floyd算法&#xff0c…
阅读更多...
支持向量机SVM代码详解——多分类/降维可视化/参数优化【python】

支持向量机SVM代码详解——多分类/降维可视化/参数优化【python】

篇1&#xff1a;SVM原理及多分类python代码实例讲解&#xff08;鸢尾花数据&#xff09; SVM原理 支持向量机&#xff08;Support Vector Machine,SVM&#xff09;&#xff0c;主要用于小样本下的二分类、多分类以及回归分析&#xff0c;是一种有监督学习的算法。基本思想是寻…
阅读更多...
腾讯云对象存储的创建和S3 Browser的使用

腾讯云对象存储的创建和S3 Browser的使用

简述 想想第一次接触对象存储的时候还是很兴奋的&#xff0c;同时也是一脸懵逼&#xff1b;然后开始网上疯狂的找资料&#xff0c;但因为客户当时给的文档写的是关于Amazon S3之类的&#xff0c;所以自以为的就只有Amazon S3这一家&#xff0c;接着开始查资料&#xff0c;经过一…
阅读更多...
Spark学习---2、SparkCore（RDD概述、RDD编程（创建、分区规则、转换算子、Action算子））

Spark学习---2、SparkCore（RDD概述、RDD编程（创建、分区规则、转换算子、Action算子））

1、RDD概述 1.1 什么是RDD RDD(Resilient Distributed Dataset)叫弹性分布式数据集&#xff0c;是Spark中对于分布式数据集的抽象。代码中是一个抽象类&#xff0c;它代表一个弹性的、不可变、可分区、里面的元素可并行计算的集合。 1.2 RDD五大特性 1、一组分区&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023