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

<template>
  <div>
    <h2>方式二：通过Vuex + mapState</h2>
    <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>
import { mapState } from 'vuex';

export default {
  name: 'Person2',
  computed: {
    // personList () {
    //   return this.$store.state.personList
    // },  等价于下面写法
24     ...mapState(['personList']),
  },



  methods: {
    addPerson () {

    },
  },
}
</script>

<style>
</style>

------------------多组件共享数据------------------

示例一(实现Person组件与Count组件的数据共享)：通过Vuex +  计算属性 + mapState

注：多组件数据共享要点

1. 需在src/store/index.js文件==》state中定义需共享的数据
   
2. 获取state中共享的数据需在组件中进行引用==》例如通过...mapState(['personList', 'sum']),进行引用

App.vue

<template>
  <div class="app">
    <Count />
    <hr>
    <!-- <Person /> -->
    <Person2 />
  </div>
</template>

<script>
// 引入组件
import Count from './components/Count.vue';
import Person from './components/Person.vue';
import Person2 from './components/Person2.vue';
export default {
  name: 'App',
  components: { Count, Person, Person2 },


}
</script>

<style scoped>
</style>

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
  },
  AddPerson (state, value) {
    state.personList.unshift(value)
  },
}

52 // 准备state--用于存储数据(state中存放的就是全局共享数据)
53 const state = {
54   sum: 0,//当前的和
55   school: '高新一中',
56   subject: '语数外',
57   personList: [{ id: '001', name: 'zhangsan' }] //数组
58 
59 }

// 准备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

Person2.vue

<template>
  <div>
    <h2 style="color: brown">多组件共享数据展示，Count组件求和结果是：{{sum }}</h2>

    <h2>方式二：通过Vuex + 计算属性 + mapState</h2>
    <h3>人员信息列表</h3>
    <input type="text"
           placeholder="请输入姓名"
           v-model="name">
    <button @click="addPerson()">添加</button>
    <ul>
      <li v-for="p in personList"
          :key="p.id">{{p.name}}</li>
    </ul>
  </div>
</template>

<script>
19 import { mapState } from 'vuex';
20 import { nanoid } from 'nanoid'

export default {
  name: 'Person2',
  data () {
    return {
      name: '',
    }
  },
  computed: {
    // personList () {
    //   return this.$store.state.personList
    // },  等价于下面写法
33     ...mapState(['personList', 'sum']),
  },

  methods: {
    addPerson () {
38       const person = { id: nanoid(), name: this.name }
      console.log('person obj==>', person)
      //调用mutations中的新增方法
41       this.$store.commit('AddPerson', person)
      this.name = ''
    },
  },
}
</script>

<style>
</style>

Count.vue 

<template>
  <div>
    <h3>当前求和*10为：{{ bigSum }}</h3>
    <h3>当前求和为：{{ sum }}</h3>
    <h3>我在：{{ school }}，学习:{{subject }}</h3>
    请选择数量：<select v-model.number="selectNo">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select><br>

    <button @click="increment(selectNo)">mutation对象方式+</button>
    <button @click="decrement(selectNo)">mutation对象方式-</button> <br>

    <hr>
    <h3 style="color: brown">...mapMutations数组写法(使用时--使用组件中的方法命名必须和mutations中的一致)</h3>
    <button @click="Increment(selectNo)">mutation 数组方式+</button>
    <button @click="Decrement(selectNo)">mutation 数组方式-</button><br>

    <button @click="incrementOdd(selectNo)">当前为奇数再加</button>
    <button @click="incrementWait(selectNo)">等一下再加</button>

    <hr>
    <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>
  </div>
</template>

<script>
33 import { mapGetters, mapState, mapMutations, mapActions } from 'vuex'

export default {
  name: 'Count',
  data () {
    return {
      selectNo: 1,//当前选择的数字
    }
  },
  // 通过计算属性获取state数据
  computed: {
    // totalSum () { return this.$store.state.sum },
    // totalSum ()、 mySchool ()、 mySubject () 等价于以下代码
    // 写法一：对象写法，借助mapState生成计算属性，从state中读取数据
    // ...mapState({ totalSum: 'sum', mySchool: 'school', mySubject: 'subject' }),

    // 写法二：数组写法，借助mapState生成计算属性，从state中读取数据
50     ...mapState(['sum', 'school', 'subject', 'personList']),

    // 等价于  bigSum () {      return this.$store.getters.bigSum    },
    // 借助mapGetters生成计算属性，从getters中读取数据
    // ...mapGetters(['bigSum']),//数组写法
    ...mapGetters({ bigSum: 'bigSum' }),//对象写法

  },
  mounted () {
    console.log('count this==>', this)
    console.log('count this.$store==>', this.$store)
  },
  methods: {

    /*  可使用...mapMutations代替如下代码
     // mutations
     decrement () {
       // this.$store.dispatch('decrement', this.selectNo)
       // 如果没有业务路基处理，可直接使用mutations中对应的方法
       this.$store.commit('Decrement', this.selectNo)
     }, */

    //  借助mapMutations生成对应的方法，方法中会调用commit去联系mutations
    ...mapMutations({ increment: 'Increment', decrement: 'Decrement' }), //对象写法
    ...mapMutations(['Increment', 'Decrement']), //数组写法(数组写法使用时，使用组件中的方法命名必须和mutations中的一致)


    /*  actions
     ...mapActions 可替代如下代码
     incrementWait () {
       this.$store.dispatch('incrementWait', this.selectNo)
     }, */

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

  },

}
</script>

<style scoped>
button {
  margin: 6px;
}
</style>