• vuex的学习

    目录

    一、vuex

    1.定义

    2.安装

    二、store创建

    1.定义

    2.结构

    3.引入store

    三、状态的核心概念

    1. state

    2. actions

    3. mutations

    4. getters

    5.数据映射

    6. 案列示例

    四、模块化编码(modules)

    一、vuex

    1.定义

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

     原理图：

    State | VuexVue.js 的中心化状态管理方案https://vuex.vuejs.org/zh/guide/state.html

    vuex多应用于多个组件应用与同一个状态，多个组件变更同一状态。

    • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

    什么是“状态管理模式”？

    这个状态自管理应用包含以下几个部分：

    • 状态，驱动应用的数据源；
    • 视图，以声明方式将状态映射到视图；
    • 操作，响应在视图上的用户输入导致的状态变化。

    以下是一个表示“单向数据流”理念的简单示意：

    但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

    • 多个视图依赖于同一状态。
    • 来自不同视图的行为需要变更同一状态。

    2.安装

    npm i vuex@3        注释：@3是版本号，vue2用vuex@3版本,vue3用4版本

    二、store创建

    1.定义

    概念：每一个Vuex应用的核心就是Store（仓库），我们可以说Store是一个容器，它包含着你的应用中大部分的状态 (state)。但Store里面的状态与单纯的全局变量是不一样的，无法直接改变Store中的状态。想要改变状态需通过mutation去修改。

    Vuex 和单纯的全局对象有以下两点不同：

    1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

    2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

    2.结构

    创建文件夹store与src根目录下，建立index.js。需包含actions，mutations，state结构如下：

    import Vue  from 'vue'        // 引入vue

    import Vuex from 'vuex'        // 引入vuex

    Vue.use(Vuex)         // 应用vue插件

    // actions响应组件中的动作

    const actions = { }

    // mutations操作数据state

    const mutations = { }

    // 准备state存储数据

    const state = {

       //状态对象

    }

     

    //想要对状态有要进一步的加工时可以用到

    //getters  从 store 中的 state 中派生出一些状态

    const getters={

        randmajor(state){

            return state.major+Math.ceil(Math.random()*9) + Math.ceil(Math.random()*9) + Math.ceil(Math.random()*9);

        }

    }

     

    // 创建store并导出

    const store = new Vuex.Store({

                  actions,

                  mutations,

                  state,

                  getters

    })

    //默认导出store

    export default store

    3.引入store

    在main.js中引入store，全局组件都可以使用vuex。

    import store from './store'

    new Vue({

      render: h => h(App),

      store,

    }).$mount('#app')

    三、状态的核心概念

    1. state

    state是状态数据，可以通过this.$store.state来直接获取状态，也可以利用vuex提供的mapState辅助函数将state映射到计算属性（computed）中去。

    示例：

    1. index.js

    const state = {

        //状态对象

        name:'2209',

        major:'web前端',

     }

    2. 两个组件中的写法

    1）插值引用：{{$store.state.name}}

    班级:{{$store.state.name}},专业:{{$store.state.major}}

    2）在计算属性中写法

    班级:{{name}},专业:{{major}}

    computed:{

            name(){

                return this.$store.state.name;

            },

            major(){

                return this.$store.state.major;

            }

    }

     

    3)数据映射写法

    班级:{{myname}},专业:{{mymajor}}

    import {mapState} from 'vuex'

    computed:{

            // 当计算属性的名称与vuex一致的时候 用数组形式

            // ...mapState(["name","major"]),

            // 当计算属性的名称与vuex不一致的时候 用对象形式

            ...mapState({myname:"name",mymajor:"major"}),

    }

    2. actions

    Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。

    // actions响应组件中的动作

    //context 上下文，value组件传递过来的值

    //可以包含定时器，ajax代码，有业务逻辑使用action，无业务逻辑直接使用mutations

    //index.js中

    const actions = {

        editwait(context,value){

            setTimeout(()=>{

                context.commit('editmajor',value);

            },3000)

        }

    }

     在组件中使用: $store.dispatch('对应的 action 回调名') 触发

     

    methods:{

            editwait(str){

                this.$store.dispatch('editwait',str);

            }

        }

    用数据映射触发

    import {mapActions } from 'vuex'

    methods:{

           ...mapActions(['editwait']),

        }

    3. mutations

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

    index.js：

    // mutations操作数据state

    const mutations = {

        editname(state,value){

            state.name=value;

        },

        editmajor(state,value){

            state.major=value;

        },

    }

     组件中触发：

     

    methods:{

            editname(){

                this.$store.commit('editname','2209班')

            },

            editmajor(){

                this.$store.commit('editmajor','vue')

            },

        }

    此时的mutations 无业务逻辑，就是更改状态。 

    数据映射方法：

     

    import {mapActions } from 'vuex'

    methods:{

            ...mapActions(['editwait']),

        }

    4. getters

    有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数，也就是对状态在加工：

    index.js：

    //getter   从 store 中的 state 中派生出一些状态

    const getters={

        randmajor(state){

            return state.major+Math.ceil(Math.random()*9) + Math.ceil(Math.random()*9) + Math.ceil(Math.random()*9);

        }

    }

    组件中调用数据：

     

    专业+随机数:{{randmajor}}

     

    computed:{

             randmajor(){

                 return this.$store.getters.randmajor;

             }

        },

     数据映射方法：

     

    专业+随机数:{{randmajor}}

     

    import {mapGetters } from 'vuex'

    computed:{

            ...mapGetters(['randmajor']),

        },

    5.数据映射

    三点运算符的形式书写

     mapMutations和mapActions：

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

    mapState和mapGetters：

    mapState(mapGetters)生成计算属性,从state中读取状态(对象形式)

    6. 案列示例

    index.js部分

    1. //需包含actions，mutations，state
    2. // 引入vue
    3. import Vue  from 'vue'
    4.  
    5. // 引入vuex
    6. import Vuex from 'vuex'
    7.  
    8. // 应用vue插件
    9. Vue.use(Vuex)
    10.  
    11. //1
    12. // 准备state存储数据
    13. const state = {
    14.     //状态对象
    15.     name:'2209',
    16.     major:'web前端',
    17.  }
    18.  
    19. // actions响应组件中的动作   可以包含任意异步操作
    20. const actions = {
    21.     editwait(context,value){
    22.         setTimeout(()=>{
    23.             context.commit('editmajor',value);
    24.         },3000)
    25.     }
    26. }
    27.  
    28. // mutations操作数据state
    29. const mutations = {
    30. 	editname(state,value){
    31.         state.name=value;
    32.     },
    33.     editmajor(state,value){
    34.         state.major=value;
    35.     },
    36. }
    37.  
    38. //getter   从 store 中的 state 中派生出一些状态
    39. const getters={
    40.     randmajor(state){
    41.         return state.major+Math.ceil(Math.random()*9) + Math.ceil(Math.random()*9) + Math.ceil(Math.random()*9);
    42.     }
    43. }
    44.  
    45.  
    46.  
    47. //创建store并导出
    48. const store = new Vuex.Store({
    49. 	actions,
    50. 	mutations,
    51. 	state,
    52.     getters
    53. })
    54. //默认导出store
    55. export default store

    组件1

     

    2. <script>
    3. import {mapActions, mapGetters, mapMutations, mapState, } from 'vuex'
    4. export default {
    5.     name:'ZhangSan',
    6.     computed:{
    7.         // name(){
    8.         //     return this.$store.state.name;
    9.         // },
    10.         // major(){
    11.         //     return this.$store.state.major;
    12.         // }
    13.  
    14.         // 当计算属性的名称与vuex一致的时候 用数组形式
    15. 		// ...mapState(["name","major"]),
    16. 		// 当计算属性的名称与vuex不一致的时候 用对象形式
    17.         ...mapState({myname:"name",mymajor:"major"}),
    18.  
    19.         // randmajor(){
    20.         //     return this.$store.getters.randmajor;
    21.         // }
    22.         ...mapGetters(['randmajor']),
    23.     },
    24.     methods:{
    25.         editname(){
    26.             this.$store.commit('editname','2209班')
    27.         },
    28.         editmajor(){
    29.             this.$store.commit('editmajor','vue')
    30.         },
    31.         ...mapMutations(['editname','editmajor']),
    32.  
    33.         // editwait(str){
    34.         //     this.$store.dispatch('editwait',str);
    35.         // }
    36.         ...mapActions(['editwait']),
    37.  
    38.     }
    39. }
    40. script>
    41. <style scoped>
    42.  
    43. style>

    组件2

    2. <script>
    3. import {mapState,} from 'vuex'
    4. export default {
    5.     name:'LiSi',
    6.     computed:{
    7.         // name(){
    8.         //     return this.$store.state.name;
    9.         // },
    10.         // major(){
    11.         //     return this.$store.state.major;
    12.         // }
    13.  
    14.         // 当计算属性的名称与vuex一致的时候 用数组形式
    15. 		// ...mapState(["name","major"]),
    16. 		// 当计算属性的名称与vuex不一致的时候 用对象形式
    17.         ...mapState({myname:"name",mymajor:"major"}),
    18.         randmajor(){
    19.             return this.$store.getters.randmajor;
    20.         }
    21.  
    22.     }
    23. }
    24. script>
    25. <style scoped>
    26.  
    27. style>

     整体效果：

     共享状态，通过store把数据共享给两个组件，所以组件里的数据状态会随store里的数据变化而变化

    四、模块化编码(modules)

    Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割在模块中使用:namespaced: true, 命名空间，添加之后，当前模块下的标识符可以和其它模块相同,用于解决不同模块的命名冲突问题

    就上面一个示例来进行模块化编码：

    index,js部分

    1. //需包含actions，mutations，state
    2. // 引入vue
    3. import Vue  from 'vue'
    4.  
    5. // 引入vuex
    6. import Vuex from 'vuex'
    7.  
    8. // 应用vue插件
    9. Vue.use(Vuex)
    10.  
    11.  
    12. const Persons={
    13.     namespaced:true,
    14.     state:{
    15.         //状态对象
    16.         name:'2209',
    17.         major:'web前端',
    18.     },
    19.     actions:{
    20.         editwait(context,value){
    21.             setTimeout(()=>{
    22.                 context.commit('editmajor',value);
    23.             },3000);
    24.         }
    25.     },
    26.     mutations:{
    27.         editname(state,value){
    28.             state.name=value;
    29.         },
    30.         editmajor(state,value){
    31.             state.major=value;
    32.         },
    33.     },
    34.     getters:{
    35.         randmajor(state){
    36.             return state.major+Math.ceil(Math.random()*9) + Math.ceil(Math.random()*9) + Math.ceil(Math.random()*9);
    37.         }
    38.     }
    39. }
    40.  
    41.  
    42. //创建store并导出
    43. const store = new Vuex.Store({
    44. 	modules:{
    45.         Persons
    46.     }
    47. })
    48. //默认导出store
    49. export default store

    组件1

    2. <script>
    3. import {mapActions, mapGetters, mapMutations, mapState, } from 'vuex'
    4. export default {
    5.     name:'ZhangSan',
    6.     computed:{
    7.         ...mapState('Persons',{myname:"name",mymajor:"major"}),
    8.         ...mapGetters('Persons',['randmajor']),
    9.     },
    10.     methods:{
    11.         ...mapMutations('Persons',['editname','editmajor']),
    12.         ...mapActions('Persons',['editwait']),
    13.     }
    14. }
    15. script>
    16. <style scoped>
    17.  
    18. style>

    组件2

    2. <script>
    3. import {mapState,mapGetters} from 'vuex'
    4. export default {
    5.     name:'LiSi',
    6.     computed:{
    7.         ...mapState('Persons',{myname:"name",mymajor:"major"}),
    8.         ...mapGetters('Persons',['randmajor']),
    9.     }
    10. }
    11. script>
    12. <style scoped>
    13.  
    14. style>

    代码运行效果和上例一样

  • 相关阅读:
    利用 NLP 超能力：一步步介绍Hugging Face微调教程
    Ranger (二) ---------- Ranger 安装
    Python分支结构详解（二）——程序异常处理
    Edge使用猴油脚本实战（实验室安全考试系统刷在线时长——网站永久自动刷新）
    mac照片肖像美容ON1 Portrait AI 2023
    我们如何利用 0 美元营销将 UX/UI 产品发展到 320k 用户
    数字工厂怎样建设异常管理系统？
    为什么你的项目总延期？多半是没做好5件事
    计算机毕业设计ssm+vue基本微信小程序的客户资源管理系统
    获取keystore中的公钥模数及md5
  • 原文地址：https://blog.csdn.net/qq_53841687/article/details/126392131