Vue学习笔记62--nanoid(插件生成唯一编号) + uuid + 多组件共享数据(Vuex + 计算属性 + mapState)

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>