• vue中的一个重要插件——vuex

    目录

    一、vuex简介

    二、vuex工作原理

    三、小案例

    四、四个map方法的使用

    1、mapState

    2、mapGetters

    3、mapMutations

    4、mapActions

    五、vuex实现数据共享案例

    1、项目目录

    2、源码

    六、vuex实现模块化+命名空间

    1、步骤：

    2、开启命名空间后，读取state数据

    ①、自己读取

    ②、借助mapState读取

     3、开启命名空间后，读取getters数据

    ①、自己读取

    ②、借助mapState读取

      4、开启命名空间后，组件中调用dispatch

    ①、自己调用dispatch

    ②、借助mapActions

     5、开启命名空间后，组件中调用commit

    ①、自己直接调用commit

    ②、借助mapMutations

    5、案例源码

    一、vuex简介：

    概念：专门在vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间的通讯方式，且适用于任意组件间通讯；

    何时使用：

    ①、多个组件依赖同一状态；

    ②、来自不同组件的行为需要变更同一状态；

    二、vuex工作原理

    三、小案例

    main.js代码：

    1. // 项目的入口文件
    2.  
    3. // 引入vue
    4. import Vue from 'vue'
    5. // 引入App，他是所有组件的父组件
    6. import App from './App'
    7. // 引入vuex
    8. import Vuex from 'vuex'
    9. // 引入store
    10. import store from './store'
    11.  
    12. // 关闭vue的生产提示
    13. Vue.config.productionTip = false
    14. // 使用vuex
    15. Vue.use(Vuex)
    16.  
    17. // 创建vue实例对象
    18. new Vue({
    19.   el:'#app',
    20.   render: h => h(App),
    21.   store,
    22. })

    App.vue代码：

    1. <template>
    2.     <div>
    3.        <Count>Count>
    4.     div>
    5. template>
    6.  
    7. <script>
    8.     import Count from './components/Count.vue'
    9.  
    10.     export default {
    11.     name: "App",
    12.     components:{Count},
    13.     
    14. }
    15. script>

    Count.vue代码：

    1. <template>
    2.   <div>
    3.     <h1>当前求和为：{{$store.state.sum}}h1>
    4.     <select v-model.number="n">
    5.     
    6.         <option :value="1">1option>
    7.         <option :value="2">2option>
    8.         <option :value="3">3option>
    9.     select>
    10.     <button @click="increment">+button>
    11.     <button @click="decrement">-button>
    12.     <button @click="incrementOdd">当前求和为奇数再+1button>
    13.     <button @click="incrementWait">等一等再+1button>
    14.   div>
    15. template>
    16.  
    17. <script>
    18. export default {
    19.     name:'Count',
    20.     data(){
    21.         return{
    22.             n:1,
    23.             
    24.         }
    25.     },
    26.     methods:{
    27.         increment(){
    28.             // 由于没有业务逻辑，所以可以让其直接调用mutations中的commit，而不需要再通过actions
    29.             this.$store.commit("JIA",this.n)
    30.         },
    31.         decrement(){
    32.             // 由于没有业务逻辑，所以可以让其直接调用mutations中的commit，而不需要再通过actions
    33.             this.$store.commit("JIAN",this.n)
    34.         },
    35.         incrementOdd(){
    36.             this.$store.dispatch("jiaOdd",this.n)
    37.         },
    38.         incrementWait(){
    39.             this.$store.dispatch("jiaWait",this.n)
    40.         }
    41.     }
    42. }
    43. script>
    44.  
    45. <style>
    46.     button{
    47.         margin-left: 5px;
    48.     }
    49. style>

    store/index.js代码：

    1. // 该文件用于创建vuex中最核心的store
    2.  
    3. // 引入Vue
    4. import Vue from 'vue'
    5.  
    6. // 引入Vuex
    7. import Vuex from 'vuex'
    8.  
    9. // 应用Vuex插件
    10. Vue.use(Vuex)
    11.  
    12. // 准备actions————用于响应组件中的动作
    13. const actions = {
    14.     // 接收两个参数：第一个是mini版的store，第二个是传过来的value值
    15.     
    16.     // 由于没有业务逻辑，所以可以让其直接调用mutations中的commit，而不需要再通过actions
    17.     // jia(context,value){
    18.     //     // 调用mutations中的JIA函数
    19.     //     console.log('actions中的jia被调用了')
    20.     //     context.commit("JIA",value)
    21.     // },
    22.     // jian(context,value){
    23.     //     // 调用mutations中的JIA函数
    24.     //     console.log('actions中的jian被调用了')
    25.     //     context.commit("JIAN",value)
    26.     // },
    27.     jiaOdd(context,value){
    28.         console.log('actions中的jiaOdd被调用了')
    29.         if(context.state.sum % 2){
    30.             // 调用mutations中的JIA函数
    31.             context.commit("JIA",value)
    32.         }
    33.     },
    34.     jiaWait(context,value){
    35.         console.log('actions中的jia被调用了')
    36.         setTimeout(()=>{
    37.         // 调用mutations中的JIA函数
    38.             context.commit("JIA",value)
    39.         },500)
    40.     }
    41. }
    42. // 准备mutations————用于操作数据（state）
    43. const mutations = {
    44.     JIA(state,value){   
    45.         console.log('mutations中的JIA被调用了')
    46.         state.sum+=value
    47.     },
    48.     JIAN(state,value){   
    49.         console.log('mutations中的JIAN被调用了')
    50.         state.sum-=value
    51.     }
    52. }
    53. // 准备state————用于存储数据
    54. const state = {
    55.     sum:0
    56. }
    57.  
    58.  
    59.  
    60. // 创建并暴露store
    61. export default new Vuex.Store({
    62.     actions,
    63.     mutations,
    64.     state
    65. })

    四、四个map方法的使用

    1、mapState

    借助mapState生成计算属性，从state中读取数据（对象写法）

    1. computed:{
    2.         //  借助mapState生成计算属性：sum、school、subject（对象写法）
    3.         ...mapState({sum:'sum',school:'school',subject:'subject'})
    4.     },

     借助mapState生成计算属性，从state中读取数据（数组写法）

    1. computed:{
    2.         // 借助mapState生成计算属性sum、school、subject（数组写法）
    3.         ...mapState(['sum','school','subject'])
    4.     },

    2、mapGetters

    借助mapGetters生成计算属性，从getters中读取数据（对象写法）

    1. computed:{
    2.         // 借助mapState生成计算属性sum、school、subject（数组写法）
    3.        ...mapGetters({bigSum:'bigSum'}),
    4.     },

    借助mapGetters生成计算属性，从getters中读取数据（数组写法）

    1. computed:{
    2.         // 借助mapState生成计算属性sum、school、subject（数组写法）
    3.        ...mapGetters(['bigSum'])
    4.     },

    3、mapMutations

    借助mapMutations生成对应的方法，方法中会调用commit去联系mutations；

    （1）、对象方法

    注意：

    这里调用increment和decrement方法会传入一个默认的参数events，所以需要在调用它的html结构中手动传入参数n；

    1. <button @click="increment(n)">+button>
    2. <button @click="decrement(n)">-button>
    1. methods:{
    2.         // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（对象方法）
    3.         // 注意：这里调用increment和decrement方法会传入一个默认的参数events，所以需要在调用它的html结构中手动传入参数n
    4.         ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    5.  
    6.     },

    （2）、数组方法

    注意：

    这里需要将html结构中调用的位置都改为JIA和JIAN；

    1. <button @click="JIA(n)">+button>
    2. <button @click="JIAN(n)">-button>
    1. methods:{
    2.         
    3.         // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations（数组方法）
    4.         // 注意：这里使用的是JIA和JIAN，需要在html结构中改为JIA和JIAN
    5.          ...mapMutations(['JIA','JIAN']),
    6.  
    7.     },

    4、mapActions

     帮我们生成与Actions对话的方法，即：包含$store.dispatch(xxx)的函数；

    借助mapActions生成对应的方法，方法中会调用commit去联系mutations；

    （1）、对象方法

    注意：

    这里调用iincrementOdd和incrementWait方法会传入一个默认的参数events，所以需要在调用它的html结构中手动传入参数n；

    2.     <button @click="incrementOdd(n)">当前求和为奇数再+1button>
    3.     <button @click="incrementWait(n)">等一等再+1button>
    1. methods:{
    2.         // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象方法）
    3.         ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
    4.  
    5.     },

    （2）、数组方法

    注意：

    这里需要将html结构中调用的位置都改为jiaOdd和jiaWait；

    2.     <button @click="jiaOdd(n)">当前求和为奇数再+1button>
    3.     <button @click="jiaWait(n)">等一等再+1button>
    1. methods:{
    2.         
    3.         // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（数组方法）
    4.         ...mapActions(['jiaOdd','jiaWait'])
    5.  
    6.     },

    五、vuex实现数据共享案例

    1、项目目录

    2、源码：

    App.vue

    1. <template>
    2.     <div>
    3.        <Count>Count>
    4.        <Person>Person>
    5.     div>
    6. template>
    7.  
    8. <script>
    9.     import Count from './components/Count.vue'
    10.      import Person from './components/Person.vue'
    11.  
    12.     export default {
    13.     name: "App",
    14.     components:{Count,Person},
    15.     
    16. }
    17. script>

    store/index.js

    1. // 该文件用于创建vuex中最核心的store
    2.  
    3. // 引入Vue
    4. import Vue from 'vue'
    5.  
    6. // 引入Vuex
    7. import Vuex from 'vuex'
    8.  
    9. // 应用Vuex插件
    10. Vue.use(Vuex)
    11.  
    12. // 准备actions————用于响应组件中的动作
    13. const actions = {
    14.     jiaOdd(context,value){
    15.         console.log('actions中的jiaOdd被调用了')
    16.         if(context.state.sum % 2){
    17.             // 调用mutations中的JIA函数
    18.             context.commit("JIA",value)
    19.         }
    20.     },
    21.     jiaWait(context,value){
    22.         console.log('actions中的jia被调用了')
    23.         setTimeout(()=>{
    24.         // 调用mutations中的JIA函数
    25.             context.commit("JIA",value)
    26.         },500)
    27.     }
    28. }
    29. // 准备mutations————用于操作数据（state）
    30. const mutations = {
    31.     JIA(state,value){   
    32.         console.log('mutations中的JIA被调用了')
    33.         state.sum+=value
    34.     },
    35.     JIAN(state,value){   
    36.         console.log('mutations中的JIAN被调用了')
    37.         state.sum-=value
    38.     },
    39.     ADD_PERSON(state,value){
    40.         console.log('mutations中的ADD_PERSON被调用了')
    41.         state.personList.unshift(value)
    42.     }
    43. }
    44. // 准备state————用于存储数据
    45. const state = {
    46.     sum:0,
    47.     school:'尚硅谷',
    48.     subject:'前端',
    49.     personList:[
    50.         {id:'001',name:'张三'}
    51.     ]
    52. }
    53. // 准备getters————用于存储加工后的数据
    54. const getters = {
    55.     bigSum(state){
    56.         return state.sum*10
    57.     }
    58. }
    59.  
    60.  
    61.  
    62. // 创建并暴露store
    63. export default new Vuex.Store({
    64.     actions,
    65.     mutations,
    66.     state,
    67.     getters
    68. })

    Count.vue

    1. <template>
    2.   <div>
    3.     <h1>当前求和为：{{sum}}h1>
    4.     <h1>当前求和扩大10倍为：{{bigSum}}h1>
    5.     <h3>我在{{school}}，学习{{subject}}h3>
    6.     
    7.     <h3 style="color:red;">Person组件的总人数为：{{personList.length}}h3>
    8.     <select v-model.number="n">
    9.     
    10.         <option :value="1">1option>
    11.         <option :value="2">2option>
    12.         <option :value="3">3option>
    13.     select>
    14.     <button @click="increment(n)">+button>
    15.     <button @click="decrement(n)">-button>
    16.     <button @click="incrementOdd(n)">当前求和为奇数再+1button>
    17.     <button @click="incrementWait(n)">等一等再+1button>
    18.   div>
    19. template>
    20.  
    21. <script>
    22. import {mapState,mapGetters, mapMutations, mapActions} from 'vuex'
    23. export default {
    24.     name:'Count',
    25.     data(){
    26.         return{
    27.             n:1,
    28.             
    29.         }
    30.     },
    31.     computed:{
    32.         ...mapState(['sum','school','subject','personList']),
    33.         ...mapGetters(['bigSum'])
    34.     },
    35.     methods:{
    36.         ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    37.         ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
    38.     },
    39.     mounted(){
    40.         const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
    41.     }
    42. }
    43. script>
    44.  
    45. <style>
    46.     button{
    47.         margin-left: 5px;
    48.     }
    49. style>

    Person.vue

    1. <template>
    2.   <div>
    3.     <h1>人员列表h1>
    4.     <h3 style="color:red;">Count组件求和为：{{sum}}h3>
    5.     <input type="text" placeholder="请输入名字" v-model="name">
    6.     <button @click="add">添加button>
    7.     <ul>
    8.         <li v-for="p in personList" :key="p.id">{{p.name}}li>
    9.     ul>
    10.   div>
    11. template>
    12.  
    13. <script>
    14. import {nanoid} from 'nanoid'
    15. export default {
    16.     name:'Person',
    17.     data(){
    18.         return{
    19.             name:''
    20.         }
    21.     },
    22.     computed:{
    23.         personList(){
    24.             return this.$store.state.personList
    25.         },
    26.         sum(){
    27.             return this.$store.state.sum
    28.         }
    29.     },
    30.     methods:{
    31.         add(){
    32.             const personObj = {id:nanoid(),name:this.name}
    33.             this.$store.commit('ADD_PERSON',personObj)
    34.             this.name = ''
    35.         }
    36.     }
    37. }
    38. script>

    六、vuex实现模块化+命名空间

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

    1、步骤：

    ①、在store文件夹中，将不同内容分模块化进行分类，一种内容存储在一个js文件中，通过index.js文件进行import和模块化定义；

    1. import countOptions from './count'
    2. import personOptions from './person'
    3.  
    4. // 创建并暴露store
    5. export default new Vuex.Store({
    6.     modules:{
    7.         countAbout:countOptions,
    8.         personAbout:personOptions
    9.     }
    10. })

    ②、将不同内容放在不同js文件中，并开启命名空间；

    person.js和count.js文件结构如下：

    1. // 个人相关的配置
    2. export default  {
    3.     namespaced:true,
    4.     actions:{
    5.         // ...
    6.     },
    7.     mutations:{
    8.         // ...
    9.     },
    10.     state:{
    11.         // ...
    12.     },
    13.     getters:{
    14.         // ...
    15.     }

    2、开启命名空间后，读取state数据

    ①、自己读取

    this.$store.state.personAbout.list

    ②、借助mapState读取

    ...mapState('countAbout',['sum','school','subject'])

     3、开启命名空间后，读取getters数据

    ①、自己读取

    this.$store.getters['personAbout/firstPersonName']

    ②、借助mapState读取

    ...mapGetters('countAbout',['bigSum'])

      4、开启命名空间后，组件中调用dispatch

    ①、自己调用dispatch

    this.$store.dispatch('personAbout/addPersonWang',person)

    ②、借助mapActions

    ...mapActions('countAbout',(incrementOdd:'jiaOdd',incrementWait:'jiaWait'))

     5、开启命名空间后，组件中调用commit

    ①、自己直接调用commit

    this.$store.commit('personAbout/ADD_PERSON',person)

    ②、借助mapMutations

    ...mapActions('countAbout',(increment:'JIA',decrement:'JIAN'))

    5、案例源码

    目录结构：

    App.vue

    1. <template>
    2.     <div>
    3.        <Count>Count>
    4.        <Person>Person>
    5.     div>
    6. template>
    7.  
    8. <script>
    9.     import Count from './components/Count.vue'
    10.      import Person from './components/Person.vue'
    11.  
    12.     export default {
    13.     name: "App",
    14.     components:{Count,Person},
    15.     
    16. }
    17. script>
    18.

     

    main.js

    1. // 项目的入口文件
    2.  
    3. // 引入vue
    4. import Vue from 'vue'
    5. // 引入App，他是所有组件的父组件
    6. import App from './App'
    7. // 引入vuex
    8. import Vuex from 'vuex'
    9. // 引入store
    10. import store from './store'
    11.  
    12. // 关闭vue的生产提示
    13. Vue.config.productionTip = false
    14. // 使用vuex
    15. Vue.use(Vuex)
    16.  
    17. // 创建vue实例对象
    18. new Vue({
    19.   el:'#app',
    20.   render: h => h(App),
    21.   store,
    22. })

    components/Count.vue

    1. <template>
    2.   <div>
    3.     <h1>当前求和为：{{sum}}h1>
    4.     <h1>当前求和扩大10倍为：{{bigSum}}h1>
    5.     <h3>我在{{school}}，学习{{subject}}h3>
    6.     
    7.     <h3 style="color:red;">Person组件的总人数为：{{personList.length}}h3>
    8.     <select v-model.number="n">
    9.     
    10.         <option :value="1">1option>
    11.         <option :value="2">2option>
    12.         <option :value="3">3option>
    13.     select>
    14.     <button @click="increment(n)">+button>
    15.     <button @click="decrement(n)">-button>
    16.     <button @click="incrementOdd(n)">当前求和为奇数再+1button>
    17.     <button @click="incrementWait(n)">等一等再+1button>
    18.   div>
    19. template>
    20.  
    21. <script>
    22. import {mapState,mapGetters, mapMutations, mapActions} from 'vuex'
    23. export default {
    24.     name:'Count',
    25.     data(){
    26.         return{
    27.             n:1,
    28.             
    29.         }
    30.     },
    31.     computed:{
    32.         ...mapState('countAbout',['sum','school','subject']),
    33.         ...mapState('personAbout',['personList']),
    34.         ...mapGetters('countAbout',['bigSum'])
    35.     },
    36.     methods:{
    37.         ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
    38.         ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
    39.     },
    40.     mounted(){
    41.         const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
    42.     }
    43. }
    44. script>
    45.  
    46. <style>
    47.     button{
    48.         margin-left: 5px;
    49.     }
    50. style>

    components/Person.vue

    1. <template>
    2.   <div>
    3.     <h1>人员列表h1>
    4.     <h3 style="color:red;">Count组件求和为：{{sum}}h3>
    5.     <h3>列表中第一个人的名字是：{{firstPersonName}}h3>
    6.     <input type="text" placeholder="请输入名字" v-model="name">
    7.     <button @click="add">添加button>
    8.     <button @click="addWang">添加一个姓王的人button>
    9.     <button @click="addPersonServer">添加一个人，名字随机button>
    10.     <ul>
    11.         <li v-for="p in personList" :key="p.id">{{p.name}}li>
    12.     ul>
    13.   div>
    14. template>
    15.  
    16. <script>
    17. import {nanoid} from 'nanoid'
    18. export default {
    19.     name:'Person',
    20.     data(){
    21.         return{
    22.             name:''
    23.         }
    24.     },
    25.     computed:{
    26.         personList(){
    27.             // 添加了personAbout
    28.             return this.$store.state.personAbout.personList
    29.         },
    30.         sum(){
    31.             // 添加了countAbout
    32.             return this.$store.state.countAbout.sum
    33.         },
    34.         firstPersonName(){
    35.             return this.$store.getters['personAbout/firstPersonName']
    36.         }
    37.     },
    38.     methods:{
    39.         add(){
    40.             const personObj = {id:nanoid(),name:this.name}
    41.             this.$store.commit('personAbout/ADD_PERSON',personObj)
    42.             this.name = ''
    43.         },
    44.         addWang(){
    45.             const personObj = {id:nanoid(),name:this.name}
    46.             this.$store.dispatch('personAbout/addPersonWang',personObj)
    47.             this.name = ''
    48.         },
    49.         addPersonServer(){
    50.             this.$store.dispatch('personAbout/addPersonServer')
    51.         }
    52.     }
    53. }
    54. script>
    55.  
    56. <style>
    57.  
    58. style>

    store/count.js

    1. // 求和相关的配置
    2. export default {
    3.     namespaced:true,
    4.     actions:{
    5.         jiaOdd(context,value){
    6.             console.log('actions中的jiaOdd被调用了')
    7.             if(context.state.sum % 2){
    8.                 // 调用mutations中的JIA函数
    9.                 context.commit("JIA",value)
    10.             }
    11.         },
    12.         jiaWait(context,value){
    13.             console.log('actions中的jia被调用了')
    14.             setTimeout(()=>{
    15.             // 调用mutations中的JIA函数
    16.                 context.commit("JIA",value)
    17.             },500)
    18.         }
    19.     },
    20.     mutations:{
    21.         JIA(state,value){       
    22.             console.log('mutations中的JIA被调用了')
    23.             state.sum+=value
    24.         },
    25.         JIAN(state,value){   
    26.             console.log('mutations中的JIAN被调用了')
    27.             state.sum-=value
    28.         },
    29.     },
    30.     state:{
    31.         sum:0,
    32.         school:'尚硅谷',
    33.         subject:'前端',
    34.     },
    35.     getters:{
    36.         bigSum(state){
    37.             return state.sum*10
    38.         }
    39.     }
    40. }

    store/index.js

    1. // 该文件用于创建vuex中最核心的store
    2.  
    3. // 引入Vue
    4. import Vue from 'vue'
    5.  
    6. // 引入Vuex
    7. import Vuex from 'vuex'
    8.  
    9. import countOptions from './count'
    10. import personOptions from './person'
    11.  
    12. // 应用Vuex插件
    13. Vue.use(Vuex)
    14.  
    15.  
    16.  
    17.  
    18.  
    19. // 创建并暴露store
    20. export default new Vuex.Store({
    21.     modules:{
    22.         countAbout:countOptions,
    23.         personAbout:personOptions
    24.     }
    25. })

    store/person.js

    1. import axios from 'axios'
    2. import { nanoid } from 'nanoid'
    3.  
    4. // 个人相关的配置
    5. export default  {
    6.     namespaced:true,
    7.     actions:{
    8.         addPersonWang(context,value){
    9.             if(value.name.indexOf('王') === 0){
    10.                 context.commit('ADD_PERSON',value)
    11.             }else{
    12.                 alert('添加的人必须姓王！')
    13.             }
    14.         },
    15.         addPersonServer(context){
    16.             // 地址是一个随机自动显示文字的api
    17.             axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
    18.                 response => {
    19.                     context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
    20.                 },
    21.                 error => {
    22.                     alert(error.message)
    23.                 }
    24.             )
    25.         }
    26.     },
    27.     mutations:{
    28.         ADD_PERSON(state,value){
    29.             console.log('mutations中的ADD_PERSON被调用了')
    30.             state.personList.unshift(value)
    31.         }
    32.     },
    33.     state:{
    34.         personList:[
    35.             {id:'001',name:'张三'}
    36.         ]
    37.     },
    38.     getters:{
    39.         firstPersonName(state){
    40.             return state.personList[0].name
    41.         }
    42.     }
    43. }

  • 相关阅读:
    go-gin-vue3-elementPlus带参手动上传文件
    板材的Dk和Df测试方法概述
    HTML课程简介
    Python和Scrapy构建可扩展的框架
    linux ubuntu 开发环境搭建 opencv fftw openvino
    基于微信小程序的付费自习室系统平台设计与实现的源码+文档
    VSCode配置C和C++语言
    有人说SaToken吃相难看，你怎么看。
    迁移学习——ResNet152
    对数据安全建设的思路ing
  • 原文地址：https://blog.csdn.net/weixin_46376652/article/details/125858614