• 29.vuex

    下面讲解不举例子，只总结基本使用

    1.vuex是什么？

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

    2.什么时候使用Vuex？

    多个组件需要共享数据时

    3.搭建vuex环境

    （1）创建store文件：src/store/index.js

    1. //引入Vue核心库
    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. //准备mutations对象——修改state中的数据
    11. const mutations = {}
    12. //准备state对象——保存具体的数据
    13. const state = {}
    14.    
    15. //创建并暴露store
    16. export default new Vuex.Store({
    17.    actions,
    18.    mutations,
    19.    state
    20. })

    （2）在main.js文件中创建vm时船传入store配置项

    1. ......
    2. //引入store
    3. import store from './store'
    4. ......
    5.    
    6. //创建vm
    7. new Vue({
    8.    el:'#app',
    9.    render: h => h(App),
    10.    store
    11. })
    12.    ```

    4.基本使用

    1. 初始化数据、配置state、actions、mutations，操作文件store.js

    1. //引入Vue核心库
    2. import Vue from 'vue'
    3. //引入Vuex
    4. import Vuex from 'vuex'
    5. //引用Vuex
    6. Vue.use(Vuex)
    7.    
    8. const actions = {
    9.   //响应组件中加的动作
    10.   jia(context,value){
    11.    	// console.log('actions中的jia被调用了',miniStore,value)
    12.     context.commit('JIA',value)
    13.   },
    14. }
    15.    
    16. const mutations = {
    17.   //执行加
    18.   JIA(state,value){
    19.    	// console.log('mutations中的JIA被调用了',state,value)
    20.    	state.sum += value
    21.   }
    22. }
    23.    
    24. //初始化数据
    25. const state = {
    26.    sum:0
    27. }
    28.    
    29. //创建并暴露store
    30. export default new Vuex.Store({
    31.    actions,
    32.    mutations,
    33.    state
    34. })

    2.组件中读取vuex中的数据：$store.state.sum

    3.组件中修改vuex中的数据：$store.dispath('action中的方法名',数据)，或 $store.commit('mutations中的方法名',数据)

     备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接

     编写commit

    5.getters的使用

    （1）概念：当state中的数据需要经过加工后再使用时，可以使用getters加工

    （2）在store.js中追加getters配置

    （3）组件中读取数据：$store.getters.bigSum

    1. const getters = {
    2.    bigSum(state){
    3.      return state.sum * 10
    4.    }
    5. }
    6.    
    7. //创建并暴露store
    8. export default new Vuex.Store({
    9.    ......
    10.    getters
    11. })

    6.四个map方法的使用

    1. mapState方法：用于帮助我们映射state中的数据为计算属性

       computed: {

           //借助mapState生成计算属性：sum、school、subject（对象写法）

            ...mapState({sum:'sum',school:'school',subject:'subject'}),

               

           //借助mapState生成计算属性：sum、school、subject（数组写法）

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

       },

    2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

       computed: {

           //借助mapGetters生成计算属性：bigSum（对象写法）

           ...mapGetters({bigSum:'bigSum'}),

       

           //借助mapGetters生成计算属性：bigSum（数组写法）

           ...mapGetters(['bigSum'])

       },

    3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

       ```js

       methods:{

           //靠mapActions生成：incrementOdd、incrementWait（对象形式）

           ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

       

           //靠mapActions生成：incrementOdd、incrementWait（数组形式）

           ...mapActions(['jiaOdd','jiaWait'])

       }

    4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

       ```js

       methods:{

           //靠mapActions生成：increment、decrement（对象形式）

           ...mapMutations({increment:'JIA',decrement:'JIAN'}),

           

           //靠mapMutations生成：JIA、JIAN（对象形式）

           ...mapMutations(['JIA','JIAN']),

       }

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

    7.模块化+命名空间

    7.1为什么要有模块化？

    由于使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store对象就有可能变得相当臃肿。

    为了解决以上问题，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

    7.2命名空间

    命名空间的作用：

    默认情况下，模块内部的action和mutation仍然是注册在全局命名空间的——这样使得多个模块能够对同一个action或mutation作出响应。Getter同样也默认注册在全局命名空间，但是目前这并非处于功能上的目的（仅仅是维持现状来避免非兼容性变更）。必须注意，不要在不同的、无命名空间的模块定义两个相同的getter从而导致错误。

    如果希望你的模块具有更高的封装度和复用性，你可以通过添加namespaced:true的方式使其成为带命名空间的模块，当模块被注册后，它的所有getter、action及mutation都会自动根据模块注册的路径调整命名。

    这里不做过多赘述，可以自己去看vuex官方文档

    注意：

            作者在测试命名空间namespaced的继承性的时候，发现嵌套模块并未继承父模块的namespaced值。

    1. App.vue

    1. <template>
    2.   <div class="app">
    3.     <component-a>component-a>
    4.     <component-b>component-b>
    5.     <hr>
    6.   div>
    7. template>
    8. <script>
    9. import ComponentA from "./components/ComponentA.vue";
    10. import ComponentB from "./components/ComponentB.vue";
    11. export default {
    12.   name: "App",
    13.   components: {
    14.     ComponentA,
    15.     ComponentB
    16.   },
    17.   data() {
    18.     return {
    19.  
    20.     }
    21.   },
    22.   methods: {
    23.     
    24.   }
    25. }
    26. script>

    2. moduleA.js

    1. const moduleA = {
    2.     // namespaced: true,
    3.     state: {
    4.         sum: 0
    5.     },
    6.     mutations: {
    7.         addSum(state,value) {
    8.             state.sum = state.sum + value
    9.             console.log("moduleA.addSum",state,value)
    10.         },
    11.         subSum(state,value) {
    12.             state.sum = state.sum - value
    13.             console.log("module.A.subSum",state,value)
    14.         }
    15.     },
    16.     actions: {
    17.         ADDSUM(context,value) {
    18.             console.log("moduleA.ADDSUM",context)
    19.             context.commit("addSum",value)
    20.         },
    21.         SUBSUM(context,value) {
    22.             console.log("moduleA.SUBSUM",context)
    23.             context.commit("subSum",value)
    24.         }
    25.     },
    26.     getters: {
    27.         getSum(state,getters,rootState) {
    28.             console.log("getters",getters)
    29.             console.log("root",rootState)
    30.             return state.sum * 2
    31.         }
    32.     }
    33. }
    34. export default moduleA

    3. moduleB.js

    1. const moduleB = {
    2.     namespaced: true,
    3.     state: {
    4.         schoolName: "南昌大学",
    5.         schoolAddress: "江西省南昌市"
    6.     },
    7.     getters: {
    8.         // 学校信息
    9.         getSchoolInfo(state) {
    10.             return state.schoolName + '---' + state.schoolAddress
    11.         }
    12.     },
    13.     mutations: {
    14.     },
    15.     actions: {
    16.     },
    17.     modules: {
    18.         classRoom: {
    19.             namespaced: false,
    20.             state: {
    21.                 classRoomName: "一年二班",
    22.                 classRoomPersons: 64
    23.             },
    24.             getters: {
    25.                 getClassInfo(state) {
    26.                     return state.classRoomName + '---' + state.classRoomPersons
    27.                 }
    28.             }
    29.         }
    30.     }
    31. }
    32. export default moduleB

    4.index.js(store暴露文件)

    1. import Vue from "vue";
    2. import Vuex from "vuex";
    3. import moduleA from "./moduleA.js";
    4. import moduleB from "./moduleB";
    5.  
    6. Vue.use(Vuex)
    7. // 应用Vuex插件
    8. export default new Vuex.Store({
    9.       modules: {
    10.         a: moduleA,
    11.         school: moduleB
    12.       }
    13. })

    5. 组件组件ComponentA.vue

    1. <template>
    2.   <div class="component-a">
    3.     <h1>当前求和为：{{ sum }}h1>
    4.     
    5.     <button @click="increment(1)">Action++button>  
    6.     <button @click="decrement(1)">Action--button>  
    7.     <button @click="addSum(1)">Mutation++button>  
    8.     <button @click="subSum(1)">Mutation--button>
    9.   div>
    10. template>
    11.  
    12. <script>
    13. import { mapGetters, mapActions,mapMutations, mapState } from 'vuex'
    14. export default {
    15.     name: "component-a",
    16.     data() {
    17.         return {
    18.         }
    19.     },
    20.     computed: {
    21.         // ...mapState('a',['sum']),
    22.         ...mapState({
    23.             sum: state => state.a.sum
    24.         }),
    25.         // ...mapGetters('a',['getSum'])
    26.     },
    27.     methods: {
    28.         // ...mapMutations('a',{ addSum: 'addSum',subSum: 'subSum' }),
    29.         // ...mapActions('a',{ increment: 'ADDSUM',decrement: 'SUBSUM' })
    30.         increment(value) {
    31.             // 如果开启了命名空间
    32.             // this.$store.dispatch("a/ADDSUM",value)
    33.             // 如果没开启命名空间
    34.             this.$store.dispatch("ADDSUM",value)
    35.         },
    36.         decrement(value) {
    37.             // this.$store.dispatch("a/SUBSUM",value)
    38.             this.$store.dispatch("SUBSUM",value)
    39.         }
    40.     },
    41.     mounted() {
    42.         console.log("this.$store",this.$store)
    43.     }
    44. }
    45. script>
    46.  
    47. <style>
    48.     .component-a {
    49.         padding: 40px 40px;
    50.     }
    51. style>

    6. 组件ComponentB.vue

    1. <template>
    2.   <div class="component-b">
    3.     <h2>学校信息h2>
    4.     <h3>学校名称：{{ schoolName }}h3>
    5.     <hr>
    6.     <h2>教室信息h2>
    7.     <h3>教室名：{{ classRoomName }}h3>
    8.     <h3>教师学生数量：{{ classRoomPersons }}h3>
    9.   div>
    10. template>
    11.  
    12. <script>
    13. import { mapState } from 'vuex';
    14. export default {
    15.     name: "component-b",
    16.     data() {
    17.         return {
    18.             
    19.         }
    20.     },
    21.     computed: {
    22.         ...mapState('school',['schoolName','schoolAddress']),
    23.         // 给classRoom模块开启命名空间才能使用这种导入state方式
    24.         // ...mapState('school/classRoom',['classRoomName','classRoomPersons'])
    25.         // 开启命名空间与否都可以使用这种导入state方式
    26.         ...mapState({
    27.             classRoomName: state => state.school.classRoom.classRoomName,
    28.             classRoomPersons: state => state.school.classRoom.classRoomPersons
    29.         })
    30.     }
    31. }
    32. script>
    33.  
    34. <style>
    35.     .component-b {
    36.         padding: 0 40px;
    37.     }
    38. style>

  • 相关阅读:
    PAT甲级 科学计数法
    （22杭电多校二）Two Permutation (dp)，Package Delivery (贪心)
    Linux系统编程_进程间通信第2天： 共享内存（全双工）、信号（类似半双工）、信号量
    ［Linux］进程间通信（进程间通信介绍 | 匿名管道 | 命名管道）
    7.2-循环神经网络
    Kyligence Cloud 集成 Amazon Glue 实现数据目录统一管理
    使用python生成文字图片，画圆圈 ，生成圆形图片
    Java基础-package包机制
    Python将原始数据集和标注文件进行数据增强（随机仿射变换），并生成随机仿射变换的数据集和标注文件
    YOLOv5：修改backbone为SPD-Conv
  • 原文地址：https://blog.csdn.net/weixin_43893483/article/details/125960583