• vuex---$store案例

    目录

    vuex流程图

    安装vuex

    搭建vuex环境

    一、使用vuex编写求和案例

    main.js

    src/store/index.js

    Count.vue

    效果图

    二、getters配置项

    三、引入mapState、mapGettes

        借助mapState生成计算属性，从state中读取数据

          方式一：对象写法

          方式二：数组写法

        借助mapGetters生成计算属性，从getters中读取数据

          方式一：对象写法

          方式二：

    四、mapActions与mapMutations

         借助mapMutations生成对应方法，

         借助mapActions生成对应方法，

    五、vuex模块化管理+namespace

    总结

    count.js

     person.js

     count.vue

    vuex流程图

     State理解为数据源,像极了我们之前学的data

    Actions似java中的业务逻辑层，对逻辑操作，然后向Mutations发送数据，在这个业务逻辑中也可以互相调用，如下图所示（连环处理）

           Mutations类似java中的数据层，只对数据进行操作，不对业务操作（比如数据加减乘除）

    安装vuex

    搭建vuex环境

       创建文件src/store/index.js

    1. // 该文件用于创建Vuex中最为核心的store
    2. import Vue from 'vue'
    3. // 引入Vuex
    4. import Vuex from 'vuex'
    5. // 使用vuex插件
    6. Vue.use(Vuex)
    7.  
    8. // 准备actions——用于响应组件中的动作
    9. const actions={}
    10.  
    11. //准备mutations——用于操作数据（state）
    12. const mutations={}
    13.  
    14. //准备state——用于存储数据
    15. const state = {}
    16.  
    17. // 创建store并暴露
    18. export default new Vuex.Store({
    19.     // actions:actions,
    20.     // mutations:mutations,
    21.     // state:state
    22.     // 当key和value重名的时候，可以简写
    23.     actions,
    24.     mutations,
    25.     state
    26.  
    27. })
    28.  
    29.  
    30.

     在main.js中创建vm时传入store配置项

    1. // 该文件是整个项目的入口文件
    2.  
    3. // 引入vue，这个vue不能解析template配置项
    4. import Vue from 'vue'
    5. // 下面这个是引入完整版的vue。这个vue能解析template配置项
    6. // import Vue from 'vue/dis/vue'
    7.  
    8. // 引入APP组件，它是所有组件的父组件
    9. import App from './App.vue'
    10.  
    11. // 引入store
    12. import store from './store/index'
    13.  
    14.  
    15. // 关闭vue的生产提示
    16. Vue.config.productionTip = false
    17.  
    18. // 创建vue实例对象---vm
    19. new Vue({
    20.   el:'#app',
    21.   render: h => h(App),
    22.  
    23.   store,
    24.  
    25.   // 全局事件总线
    26.   beforeCreate(){
    27.     Vue.prototype.$bus = this
    28.   }
    29. })

    一、使用vuex编写求和案例

    main.js

    1. // 该文件是整个项目的入口文件
    2.  
    3. // 引入vue，这个vue不能解析template配置项
    4. import Vue from 'vue'
    5. // 下面这个是引入完整版的vue。这个vue能解析template配置项
    6. // import Vue from 'vue/dis/vue'
    7.  
    8. // 引入APP组件，它是所有组件的父组件
    9. import App from './App.vue'
    10.  
    11. // 引入store
    12. import store from './store/index'
    13.  
    14.  
    15. // 关闭vue的生产提示
    16. Vue.config.productionTip = false
    17.  
    18. // 创建vue实例对象---vm
    19. new Vue({
    20.   el:'#app',
    21.   render: h => h(App),
    22.  
    23.   store,
    24.  
    25.   // 全局事件总线
    26.   beforeCreate(){
    27.     Vue.prototype.$bus = this
    28.   }
    29. })

    src/store/index.js

    1. // 该文件用于创建Vuex中最为核心的store
    2. import Vue from 'vue'
    3. // 引入Vuex
    4. import Vuex from 'vuex'
    5. // 使用vuex插件
    6. Vue.use(Vuex)
    7.  
    8. // 准备actions——用于响应组件中的动作
    9. const actions={
    10.     // // value是传入过来的参数
    11.     // jia(context,value){
    12.     //     console.log('actions中的jia被调用了',context,value)
    13.     //     // 下面这个地方用大写的做个区分
    14.     //     context.commit('JIA',value)
    15.     // },
    16.     // jian(context,value){
    17.     //     console.log('actions中的jian被调用了',context,value)
    18.     //     // 下面这个地方用大写的做个区分
    19.     //     context.commit('JIAN',value)
    20.     // },
    21.  
    22.     jiaOdd(context,value){
    23.         console.log('actions中的jian被调用了',context,value)
    24.         if(context.state.sum%2){
    25.             context.commit('JIA',value)
    26.         }
    27.     },
    28.     jiaWait(context,value){
    29.         console.log('actions中的jiaWait被调用了',context,value)
    30.         setTimeout(()=>{
    31.             context.commit('JIA',value)
    32.         },500)
    33.     }
    34.     
    35. }
    36.  
    37. //准备mutations——用于操作数据（state）
    38. // 在这个地方不要写业务逻辑 就写数据
    39. const mutations={
    40.     // 直接的帮我们操作sum
    41.     JIA(state,value){
    42.       console.log('mutations中的JIA被调用了',state,value)
    43.       state.sum +=value
    44.     },
    45.     JIAN(state,value){
    46.         console.log('mutations中的JIAN被调用了',state,value)
    47.         state.sum -=value
    48.       },
    49.   }
    50.  
    51.  
    52. //准备state——用于存储数据
    53. const state = {
    54.     sum:0   //当前的和
    55. }
    56.  
    57. // 创建store并暴露
    58. export default new Vuex.Store({
    59.     // actions:actions,
    60.     // mutations:mutations,
    61.     // state:state
    62.     // 当key和value重名的时候，可以简写
    63.     actions,
    64.     mutations,
    65.     state
    66.  
    67. })
    68.  
    69.  
    70.  
    71.  
    72.

    Count.vue

    1. <template>
    2.     <div>
    3.       
    4.       <h1>当前求和为：{{$store.state.sum}}h1>
    5.  
    6.       <select v-model="n">
    7.         
    8.         
    9.         <option :value="1">1 option>
    10.         <option :value="2">2option>
    11.         <option :value="3">3 option>
    12.       select>
    13.  
    14.       <button @click="increment">+button>
    15.       <button @click="decrement">-button>
    16.       <button @click="incrementOdd">当前求和为奇数再加button>
    17.       <button @click="incrementWait">等一等再加button>
    18.     div>
    19. template>
    20.  
    21.  
    22.  
    23. <script>
    24.     export default {
    25.         name:'Count',
    26.         data(){
    27.             return{
    28.                 n:1,    //用户选择的数字
    29.             }
    30.         },
    31.         methods:{
    32.             increment(){
    33.               // $store在vc身上，所以要用this
    34.             //  this.$store.dispatch('jia',this.n)   如果没有逻辑我们直接commit和Mutations对话
    35.             this.$store.commit('JIA',this.n) 
    36.             },
    37.             decrement(){
    38.               // this.$store.dispatch('jian',this.n)
    39.               // 如果没有逻辑我们直接commit和Mutations对话
    40.               this.$store.commit('JIAN',this.n) 
    41.  
    42.             },
    43.             incrementOdd(){
    44.               this.$store.dispatch('jiaOdd',this.n)
    45.             },
    46.             incrementWait(){
    47.               this.$store.dispatch('jiaWait',this.n)
    48.             }
    49.         }
    50.     }
    51. script>
    52.  
    53. <style scoped>
    54.    button{
    55.     margin-left:5px
    56.    }
    57. style>

    效果图

    二、getters配置项

         这个地方像极了我们之前学的computed计算属性，其实这个地方用计算属性也可以实现，但是我们为什么不用计算属性呢？

       因为我们用计算属性的话只能在单一组件中使用，我们使用getters配置项，只要是此项目中的组件都可以调用

    1. // 准备将getters——用于将state中的数据进行加工   
    2. const getters ={
    3.     bigSum(state){
    4.         return state.sum*10
    5.     }
    6. }
    7. // 创建store并暴露
    8. export default new Vuex.Store({
    9.     // actions:actions,
    10.     // mutations:mutations,
    11.     // state:state
    12.     // 当key和value重名的时候，可以简写
    13.     actions,
    14.     mutations,
    15.     state,
    16.     getters,
    17.  
    18. })
    19.

    其他组件调用

          <h3>当前求和放大十倍：{{$store.getters.bigSum}}h3>

    三、引入mapState、mapGettes

         依然是类似key:value的形式，key是在本组件中我们要使用的名字，value是index.js组件中我们定义的名字

        借助mapState生成计算属性，从state中读取数据

       我们发现在最上面的案例的时候，获取state中数据有点麻烦，需要打好几段代码，下面我们可以直接读取

          方式一：对象写法

    1.       <h1>当前求和为：{{he}}h1>
    2.       <h3>当前求和放大十倍：{{bigSum}}h3>
    3.       <h3>我在{{xuexiao}}学习{{xueke}}h3>
      import {mapState} from 'vuex'
    1.         // 靠程序员亲自写计算属性也能实现
    2.         computed:{
    3.           // ES6语法 下面这一堆是一个对象 这句话的含义：把下面中的每一组key：value依次取出放到下面，就相当于我们写了注释中的那三个方法
    4.           ...mapState({'he':'sum','xuexiao':'school','xueke':'subject'}),
    5.           // 下面三个从state中取数据
    6.           //  he(){
    7.           //   return yhis$store.state.sum
    8.           //  },
    9.           //  xuexiao(){
    10.           //   return this.$store.state.school
    11.           //  },
    12.           //  xueke(){
    13.           //   return this.$store.state.subject
    14.           //  },
    15.           //  下面这个从getters中取数据
    16.            bigSum(){
    17.             return this.$store.getters.bigSum
    18.            }
    19.         },

         方式二：数组写法

    1.           // 这个时候不能简写！ 一定不要简写成sum，school，subject
    2.           //...mapState({'sum':'sum','school':'school','subject':'subject'}),
    3.           ...mapState(['sum','school','subject']),

        借助mapGetters生成计算属性，从getters中读取数据

      import {mapGetters} from 'vuex'

          方式一：对象写法

    1.       <h1>当前求和为：{{sum}}h1>
    2.       <h3>当前求和放大十倍：{{bigSum}}h3>
    3.       <h3>我在{{school}}学习{{subject}}h3>
    1.           //  下面这个从getters中取数据
    2.           //  bigSum(){
    3.           //   return this.$store.getters.bigSum
    4.           //  }
    5.           ...mapGetters({bigSum:'bigSum'}),
    6.

        方式二：

              ...mapGetters(['bigSum'])

    四、mapActions与mapMutations

    备注：mapActions与mapMutations使用时，若需要传递参数，在模板中绑定事件时传递好参数，否则参数是事件对象

         借助mapMutations生成对应方法，

                   方法中会调用commit去联系Mutations

      import {mapMutations} from 'vuex'
    1.       
    2.       <button @click="increment(n)">+button>
    3.       <button @click="decrement(n)">-button>
    1.         methods:{
    2.             // increment(){
    3.             //   // $store在vc身上，所以要用this
    4.             // //  this.$store.dispatch('jia',this.n)   如果没有逻辑我们直接commit和Mutations对话
    5.             // this.$store.commit('JIA',this.n) 
    6.             // },
    7.             // decrement(){
    8.             //   // this.$store.dispatch('jian',this.n)
    9.             //   // 如果没有逻辑我们直接commit和Mutations对话
    10.             //   this.$store.commit('JIAN',this.n) 
    11.             // },
    12.             ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    13.             }

         借助mapActions生成对应方法，

               生成的方法会调用dispatch去联系mutations

    1.       <button @click="incrementOdd(n)">当前求和为奇数再加button>
    2.       <button @click="incrementWait(n)">等一等再加button>
    1.             // incrementOdd(){
    2.             //   this.$store.dispatch('jiaOdd',this.n)
    3.             // },
    4.             // incrementWait(){
    5.             //   this.$store.dispatch('jiaWait',this.n)
    6.             // },
    7.             ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),

    五、vuex模块化管理+namespace

    总结

    count.js

    1. // 求和功能相关的配置
    2. export default{
    3.     // 命名空间  加上这个之后，我们下面的a才能够被map...识别
    4.     namespaced:true,
    5.     actions:{
    6.         jiaOdd(context,value){
    7.             console.log('actions中的jian被调用了',context,value)
    8.             if(context.state.sum%2){
    9.                 context.commit('JIA',value)
    10.             }
    11.         },
    12.         jiaWait(context,value){
    13.             console.log('actions中的jiaWait被调用了',context,value)
    14.             setTimeout(()=>{
    15.                 context.commit('JIA',value)
    16.             },500)
    17.         }
    18.     },
    19.  
    20.     mutations:{
    21.      // 直接的帮我们操作sum
    22.     JIA(state,value){
    23.         console.log('mutations中的JIA被调用了',state,value)
    24.         state.sum +=value
    25.       },
    26.       JIAN(state,value){
    27.           console.log('mutations中的JIAN被调用了',state,value)
    28.           state.sum -=value
    29.         },
    30.     },
    31.  
    32.     state:{   
    33.          sum:0,   //当前的和
    34.     school:'尚硅谷',
    35.     subject:'前端',
    36.     },
    37.     getters:{
    38.         // 准备将getters——用于将state中的数据进行加工   
    39.  
    40.     bigSum(state){
    41.         return state.sum*10
    42.     }
    43.     },
    44. }
    45.  
    46.  
    47.

     person.js

    1. // 人员管理相关配置
    2. export default {
    3.     namespaced:true,
    4.     actions:{},
    5.     mutations:{   
    6.         //   在这个地方value就是我们要加的那个对象
    7.         ADD_PERSON(state,value){
    8.           state.personList.unshift(value)
    9.         }
    10.     },
    11.     state:{
    12.         personList:[
    13.             {id:'001',name:'张三'},
    14.           ]
    15.     },
    16.     getters:{},
    17. }
    18.

     count.vue

    2.  
    3.  
    4.  
    5. <script>
    6.   import {mapGetters, mapState,mapMutations,mapActions} from 'vuex'
    7.  
    8.     export default {
    9.         name:'Count',
    10.         data(){
    11.             return{
    12.                 n:1,    //用户选择的数字
    13.             }
    14.         },
    15.         methods:{
    16.             ...mapMutations('a',{increment:'JIA',decrement:'JIAN'}),
    17.             ...mapActions('a',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
    18.         },
    19.         // 靠程序员亲自写计算属性也能实现
    20.         computed:{
    21.           // ...mapState(['sum','school','subject']),
    22.           // ...mapState(['a','b']),如若这样写 我们编写页面需要不断的进行 .调用
    23.           ...mapState('a',['sum','school','subject']),
    24.           ...mapState('b',['personList']),
    25.  
    26.           ...mapGetters('a',['bigSum'])
    27.           
    28.         },
    29.  
    30.     }
    31. script>
    32.  
    33. <style scoped>
    34.    button{
    35.     margin-left:5px
    36.    }
    37. style>

  • 相关阅读:
    计组--计算机系统概述
    数据结构02 队列及其应用【C++实现】
    torch其他层和联合使用
    openssl中SM2、SM3、SM4使用实例
    Mac下更新python
    【C++】多态 — 多态的原理 （下篇）
    【第十八篇】- Maven Eclipse
    STM32G0开发笔记-Platformio平台下使用libopencm3库
    canal rocketmq
    结构体的声明及其初始化
  • 原文地址：https://blog.csdn.net/weixin_51351637/article/details/126915799