nanoid--用于生成唯一主键id
使用操作步骤
第一步:npm install nanoid
第二步:import { nanoid } from 'nanoid'
第三步:id:nanoid(), //也可以指定生成字符串的长度,如nanoid(5)
uuid--用于生成唯一主键id
第一步:npm install uuid
第二步:import { v4 as uuidv4 } from 'uuid';
第三步:this.uuid = uuidv4()
公共代码块==》
main.js
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 配置提示
Vue.config.productionTip = false
// 引入vuex、store
import store from './store'//默认引入index.js
new Vue({
render: h => h(App), store
}).$mount('#app')
方式一:Vuex + 计算属性方式
示例一:src/store/index.js
// 该文件用于创建vuex中最为核心的store
// 引入Vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用插件
Vue.use(Vuex)
/* 准备actions--用于相应组件中的动作
1.context--miniStore
2.actions:建议逻辑处理在该处处理
3.如果没有业务路基处理,可直接使用mutations中对应的方法
*/
const actions = {
incrementOdd (context, value) {
if (context.state.sum % 2) {
context.commit('Increment', value)//等价于Increment
// context.commit('IncrementOdd', value)//等价于Increment
}
},
incrementWait (context, value) {
setTimeout(() => {
context.commit('Increment', value)//等价于 IncrementWait
// context.commit('IncrementWait', value)//等价于Increment
}, 1000);
},
}
/* 准备 mutations
用于操作数据(state)
不建议写业务逻辑
*/
const mutations = {
Increment (state, value) {
state.sum += value
},
Decrement (state, value) {
state.sum -= value
},
IncrementOdd (state, value) {
state.sum += value
},
IncrementWait (state, value) {
state.sum += value
},
}
// 准备state--用于存储数据(state中存放的就是全局共享数据)
const state = {
sum: 0,//当前的和
school: '高新一中',
subject: '语数外',
personList: [{ id: '001', name: 'zhangsan' }] //数组
}
// 准备getters--用于将state中的数据进行加工
const getters = {
bigSum (state) {
return state.sum * 10
}
}
//创建store
// const store = new Vuex.Store({
//创建并暴露store
export default new Vuex.Store({
actions: actions,
mutations: mutations,
state: state,
getters
})
// 暴露store
// export default store
Person.vue
<template> <div> <h3>人员信息列表</h3> <input type="text" placeholder="请输入姓名"> <button @click="addPerson">添加</button> <ul> <li v-for="p in personList" :key="p.id">{{p.name}}</li> </ul> </div> </template> <script> export default { name: 'Person', computed: { personList () { return this.$store.state.personList }, }, methods: { addPerson () { }, }, } </script> <style> </style>
方式二:通过Vuex + 计算属性 + mapState
1 <template> 2 <div> 3 <h2>方式二:通过Vuex + mapState</h2> 4 <h3>人员信息列表</h3> 5 <input type="text" 6 placeholder="请输入姓名"> 7 <button @click="addPerson">添加</button> 8 <ul> 9 <li v-for="p in personList" 10 :key="p.id">{{p.name}}</li> 11 </ul> 12 </div> 13 </template> 14 15 <script> 16 import { mapState } from 'vuex'; 17 18 export default { 19 name: 'Person2', 20 computed: { 21 // personList () { 22 // return this.$store.state.personList 23 // }, 等价于下面写法 24 ...mapState(['personList']), 25 }, 26 27 28 29 methods: { 30 addPerson () { 31 32 }, 33 }, 34 } 35 </script> 36 37 <style> 38 </style>
------------------多组件共享数据------------------
示例一(实现Person组件与Count组件的数据共享):通过Vuex + 计算属性 + mapState
注:多组件数据共享要点
- 需在src/store/index.js文件==》state中定义需共享的数据
- 获取state中共享的数据需在组件中进行引用==》例如通过...mapState(['personList', 'sum']),进行引用
App.vue
1 <template> 2 <div class="app"> 3 <Count /> 4 <hr> 5 <!-- <Person /> --> 6 <Person2 /> 7 </div> 8 </template> 9 10 <script> 11 // 引入组件 12 import Count from './components/Count.vue'; 13 import Person from './components/Person.vue'; 14 import Person2 from './components/Person2.vue'; 15 export default { 16 name: 'App', 17 components: { Count, Person, Person2 }, 18 19 20 } 21 </script> 22 23 <style scoped> 24 </style>
src/store/index.js
1 // 该文件用于创建vuex中最为核心的store 2 // 引入Vue 3 import Vue from 'vue' 4 // 引入vuex 5 import Vuex from 'vuex' 6 // 使用插件 7 Vue.use(Vuex) 8 9 /* 准备actions--用于相应组件中的动作 10 1.context--miniStore 11 2.actions:建议逻辑处理在该处处理 12 3.如果没有业务路基处理,可直接使用mutations中对应的方法 13 */ 14 const actions = { 15 incrementOdd (context, value) { 16 if (context.state.sum % 2) { 17 context.commit('Increment', value)//等价于Increment 18 // context.commit('IncrementOdd', value)//等价于Increment 19 } 20 }, 21 incrementWait (context, value) { 22 setTimeout(() => { 23 context.commit('Increment', value)//等价于 IncrementWait 24 // context.commit('IncrementWait', value)//等价于Increment 25 }, 1000); 26 27 }, 28 } 29 30 /* 准备 mutations 31 用于操作数据(state) 32 不建议写业务逻辑 33 */ 34 const mutations = { 35 Increment (state, value) { 36 state.sum += value 37 }, 38 Decrement (state, value) { 39 state.sum -= value 40 }, 41 IncrementOdd (state, value) { 42 state.sum += value 43 }, 44 IncrementWait (state, value) { 45 state.sum += value 46 }, 47 AddPerson (state, value) { 48 state.personList.unshift(value) 49 }, 50 } 51 52 // 准备state--用于存储数据(state中存放的就是全局共享数据) 53 const state = { 54 sum: 0,//当前的和 55 school: '高新一中', 56 subject: '语数外', 57 personList: [{ id: '001', name: 'zhangsan' }] //数组 58 59 } 60 61 // 准备getters--用于将state中的数据进行加工 62 const getters = { 63 bigSum (state) { 64 return state.sum * 10 65 } 66 } 67 68 //创建store 69 // const store = new Vuex.Store({ 70 71 //创建并暴露store 72 export default new Vuex.Store({ 73 actions: actions, 74 mutations: mutations, 75 state: state, 76 getters 77 }) 78 // 暴露store 79 // export default store
Person2.vue
1 <template> 2 <div> 3 <h2 style="color: brown">多组件共享数据展示,Count组件求和结果是:{{sum }}</h2> 4 5 <h2>方式二:通过Vuex + 计算属性 + mapState</h2> 6 <h3>人员信息列表</h3> 7 <input type="text" 8 placeholder="请输入姓名" 9 v-model="name"> 10 <button @click="addPerson()">添加</button> 11 <ul> 12 <li v-for="p in personList" 13 :key="p.id">{{p.name}}</li> 14 </ul> 15 </div> 16 </template> 17 18 <script> 19 import { mapState } from 'vuex'; 20 import { nanoid } from 'nanoid' 21 22 export default { 23 name: 'Person2', 24 data () { 25 return { 26 name: '', 27 } 28 }, 29 computed: { 30 // personList () { 31 // return this.$store.state.personList 32 // }, 等价于下面写法 33 ...mapState(['personList', 'sum']), 34 }, 35 36 methods: { 37 addPerson () { 38 const person = { id: nanoid(), name: this.name } 39 console.log('person obj==>', person) 40 //调用mutations中的新增方法 41 this.$store.commit('AddPerson', person) 42 this.name = '' 43 }, 44 }, 45 } 46 </script> 47 48 <style> 49 </style>
Count.vue
1 <template> 2 <div> 3 <h3>当前求和*10为:{{ bigSum }}</h3> 4 <h3>当前求和为:{{ sum }}</h3> 5 <h3>我在:{{ school }},学习:{{subject }}</h3> 6 请选择数量:<select v-model.number="selectNo"> 7 <option value="1">1</option> 8 <option value="2">2</option> 9 <option value="3">3</option> 10 </select><br> 11 12 <button @click="increment(selectNo)">mutation对象方式+</button> 13 <button @click="decrement(selectNo)">mutation对象方式-</button> <br> 14 15 <hr> 16 <h3 style="color: brown">...mapMutations数组写法(使用时--使用组件中的方法命名必须和mutations中的一致)</h3> 17 <button @click="Increment(selectNo)">mutation 数组方式+</button> 18 <button @click="Decrement(selectNo)">mutation 数组方式-</button><br> 19 20 <button @click="incrementOdd(selectNo)">当前为奇数再加</button> 21 <button @click="incrementWait(selectNo)">等一下再加</button> 22 23 <hr> 24 <h2 style="color: brown">多组件共享数据展示,Person组件总人数是:{{personList.length }}</h2> 25 <ul> 26 <li v-for="p in personList" 27 :key="p.id">{{p.name}}</li> 28 </ul> 29 </div> 30 </template> 31 32 <script> 33 import { mapGetters, mapState, mapMutations, mapActions } from 'vuex' 34 35 export default { 36 name: 'Count', 37 data () { 38 return { 39 selectNo: 1,//当前选择的数字 40 } 41 }, 42 // 通过计算属性获取state数据 43 computed: { 44 // totalSum () { return this.$store.state.sum }, 45 // totalSum ()、 mySchool ()、 mySubject () 等价于以下代码 46 // 写法一:对象写法,借助mapState生成计算属性,从state中读取数据 47 // ...mapState({ totalSum: 'sum', mySchool: 'school', mySubject: 'subject' }), 48 49 // 写法二:数组写法,借助mapState生成计算属性,从state中读取数据 50 ...mapState(['sum', 'school', 'subject', 'personList']), 51 52 // 等价于 bigSum () { return this.$store.getters.bigSum }, 53 // 借助mapGetters生成计算属性,从getters中读取数据 54 // ...mapGetters(['bigSum']),//数组写法 55 ...mapGetters({ bigSum: 'bigSum' }),//对象写法 56 57 }, 58 mounted () { 59 console.log('count this==>', this) 60 console.log('count this.$store==>', this.$store) 61 }, 62 methods: { 63 64 /* 可使用...mapMutations代替如下代码 65 // mutations 66 decrement () { 67 // this.$store.dispatch('decrement', this.selectNo) 68 // 如果没有业务路基处理,可直接使用mutations中对应的方法 69 this.$store.commit('Decrement', this.selectNo) 70 }, */ 71 72 // 借助mapMutations生成对应的方法,方法中会调用commit去联系mutations 73 ...mapMutations({ increment: 'Increment', decrement: 'Decrement' }), //对象写法 74 ...mapMutations(['Increment', 'Decrement']), //数组写法(数组写法使用时,使用组件中的方法命名必须和mutations中的一致) 75 76 77 /* actions 78 ...mapActions 可替代如下代码 79 incrementWait () { 80 this.$store.dispatch('incrementWait', this.selectNo) 81 }, */ 82 83 // 借助mapActions生成对应的方法,方法中会调用dispatch去联系actions 84 // ...mapActions({ incrementOdd: 'incrementOdd', incrementWait: 'incrementWait' }), //对象写法 85 ...mapActions(['incrementOdd', 'incrementWait']), //数组写法 86 87 }, 88 89 } 90 </script> 91 92 <style scoped> 93 button { 94 margin: 6px; 95 } 96 </style>
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!