Vuex状态管理工具详解

绝地灬酷狼 2023-06-23 08:59 26阅读 0赞

自己重新整理了下，方便学习交流。

首先Vuex它是什么，此处从官网截图：  
![在这里插入图片描述][20191218120559333.png]  
可以集中式存储管理应用的所有组件状态

## 使用 ##

1.安装vuex依赖包。

npm install vuex --save

2.创建一个store的文件夹，里面新建一个index.js文件，专门来处理vuex的数据，逻辑。  
3.导入vuex包，创建store对象。

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({ 
        state: { 
            num: 3
        },
        mutations: { 
            addNum() { 
                this.state.num++
            }
        },
        actions: { 
            addNumAsync(context) { 
                setTimeout(() => { 
                    context.commit('addNum')
                }, 3000)
            }
        },
        getters: { 
            showNum: state => { 
                console.log(state)
                return '当前vuex里面的数据为【' + state.num + '】'
            }
        },
    
    })

4.在main.js引入store.js将store对象挂载到vue实例中

import store from './store'
    
    new Vue ({ 
    	el:'#app',
    	render: h => h(app),
    	router,
    	//将创建的共享数据对象，挂载到Vue实例中
    	//所有的组件，就可以直接从store中获取全局的数据了
    	store
    })

### State ###

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。

在各个组件中访问State数据的方式

###### 第一种方式： ######

使用差值表达式的方法，把这条数据放进去。

this.$store.state.全局数据名称

###### 第二种方式 ######

//1.从vuex中导入mapState函数
    import {  mapState } form 'vuex'
    
    //2.通过导入的mapState函数，将当前组件需要的全部数据，映射为当前组件的computed计算属性：
    computed:{ 
        ...mapState(['count'])
    }

### Mutation ###

这里在vuex中只能通过Mutation用于变更Store数据，不可以直接操作Store中的数据，主要是为了可以集中监控所有的数据的变化，在这个里面不能写异步的代码。

在各个组件中触发Mutation的方式:

###### 第一种方式： ######

methods: { 
        add() { 
            //触发Mutation的第一种方式
            this.$store.commit('addNum')
        }
    }

###### 第二种方式： ######

//1.从vuex中导入mapMutations函数
    import {  mapMutations } from 'vuex'
    
    //2.通过导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法就可以直接使用
    methods: { 
        ...mapMutations(['addNum'])
    }

### Action ###

用于处理异步任务

如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。

在各个组件中触发Action的方式:

###### 第一种方式： ######

methodss: { 
        handle() { 
            //触发Action的第一种方式
            this.$store.dispatch('addNumAsync')
        }
    }

###### 第二种方式： ######

//1.从vuex中导入mapActions函数
    import {  mapActions } from 'vuex'
    //通过刚才导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法就可以直接使用
    methods:{ 
        ...mapActions(['addNumAsync'])
    }

触发actions异步任务时携带参数，在定义的时候就要先定义好。  
定义：

actions: { 
            addNAsync(context,step) { 
                setTimeout(() => { 
                    context.commit('addN',step)
                },1000)
            }
        }

触发：

this.$store.dispatch('addNAsync',5)

### Getter ###

它可以对store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性，当store中数据发送变化，Getter的数据也会跟着变化

在各个组件中使用Getter的方式:

###### 第一种方式： ######

this.$store.getters.名称

###### 第二种方式： ######

//1.从vuex中导入mapGetters 函数
    import {  mapGetters } from 'vuex'
    //通过刚才导入的mapGetters 函数，映射为当前组件的computed方法就可以直接使用
    computed:{ 
        ...mapGetters(['showNum'])
    }

### Module ###

将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

这个的话个人很少用到  
贴上一个官方的模板

const moduleA = { 
      state: {  ... },
      mutations: {  ... },
      actions: {  ... },
      getters: {  ... }
    }
    
    const moduleB = { 
      state: {  ... },
      mutations: {  ... },
      actions: {  ... }
    }
    
    const store = new Vuex.Store({ 
      modules: { 
        a: moduleA,
        b: moduleB
      }
    })
    
    store.state.a // -> moduleA 的状态
    store.state.b // -> moduleB 的状态

可以去官网查看  
[https://vuex.vuejs.org/zh/guide/modules.html][https_vuex.vuejs.org_zh_guide_modules.html]

我个人使用的话一般都是使用第一种方式，步骤少，直接使用

//访问State数据的方式:
    this.$store.state.全局数据名称
     //触发Mutation的方式:
    this.$store.commit('定义的方法名')
     //触发Action的方式:
    this.$store.dispatch('定义的方法名')
     //使用Getter的方式:
    this.$store.getters.名称

Module就很少用

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！

[20191218120559333.png]: https://img-blog.csdnimg.cn/20191218120559333.png
[https_vuex.vuejs.org_zh_guide_modules.html]: https://vuex.vuejs.org/zh/guide/modules.html