如何使用正确的方法学习Vuex?

前言

今天这篇文章的主题是Vuex,相信进来的前端小伙伴都有了解或使用过Vue，这里为什么提vue呢?因为往往在大型项目中都会选择使用VueX来管理响应式数据，那如何正确姿势使用VueX呢？

一、什么是Vuex?

1.1 官方的解释

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

1.2 个人总结

多个组件共享 同一个数据的状态管理工具,通过state来存储他们的数据，而让mutations提交和修改数据，modules将他们进行模块化管理。

当多个视图组件依赖同一个状态，来自不同视图的行为需要变更同一个状态。如登录、加入购物车。如果说数据通过父子组件通讯 则到数据量大的时候，导致代码变的很繁琐，当兄弟组件需要传递却也无能为力，vuex的出现解决了这一系列问题，但也非必用，往往会根据自己项目的业务的需求来选择。

二、由哪几部分组成

• State vue的状态管理，驱动应用的数据源
• Mutations 同步操作 它是唯一可以直接更改state状态，通过提交commit触发mutation更改state
• Actions 异步操作 它不能直接改变state而是需要触发mutation来更改state，它可以任意包含异步操作
• Getters 计算属性 类似于vue组件中的computed，可以过滤，处理state，结果也会缓存，只有当依赖值发生改变才会从新计算
• Modules 模块 支持模块化 让每个模块都有自己的state，mutation，action，getter，甚至可以嵌套子模块

三、vue中如何使用?

<template>
    <div class="use_store">
    1.直接通过'$store.state.message'获取仓库中的数据
        <span>{{$store.state.message}}</span>
    2.巧用'getters'获取仓库中的数据
        <span>{{$store.getters.getReturnData}}</span>
    </div>
</template>
<script>
    export default{
        mounted(){
            // 发射'setDate'事件到vuex 既是调用xuex中的方法
            this.$store.dispatch('setDate','传参')
        }
    }
</script>

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const store = new Vuex.Store({
    // 数据状态管理(当前模块仓库中的数据)
    state:{               
        message:'数据管理'
    }, 
    // 过滤和简化数据 第二个参数getters可以拿到其他getters的方法返回的数据进行二次过滤
    getters:{  
        getReturnData(state,getters){
            return state.message
        }，
        getReturnDatas(state,getters){
            return getters.getreturnData + '二次过滤数据'
        }
    },
    // 同步操作 用来管理和修改state中的数据
    mutations:{           
        SET_DATE(state,params){ 
            state.message = params
        }
    }, 
    /**
    *  支持异步操作
    *  commit  提交方法当前模块至'mutations'
    *  dispatch 调用当前模块'actions'中的方法处理
    *  getters 获取当前模块的'getters'
    *  state  获取当前仓库中的数据
    *  rootState 获取其他模块的仓库数据  例如：rootState.user.message
    *  rootGetter 获取其他模块的计算属性 例如：rootGetters['users/getData']
    */
    actions:{            
        setDate({commit,dispatch,getters,state,rootState,rootGetters},params){
            commit('SET_DATE',params)   // 提交至'mutations'来修改仓库中的数据
        }
    },
    // 模块化管理
    modules:{}
})

四、vuex如何模块化

模块化就是将vuex拆分成不同的模块，无论从项目上还是结构上，都容易维护，我们在平时写的vuex中，都是在一个文件中，写 state、getters、mutations、actions 想象一下，如果我们的项目特别大，那么我们vuex中要维护的内容会特别多的时候，例如购物车需要用到vuex，设置需要用到vuex，首页也需要用到vuex，那么如果我们都写到一个文件中，就会出现代码相当的臃肿。这一个 store 文件最后好几万行代码。还怎么维护？

<template>
    <div class="use_store">
    1.获取 users 模块仓库中的数据
        <span>{{$store.state.users.message}}</span>
    2.巧用'getters'获取模块化仓库中的数据
        <span>{{$store.getters['users/getModuleData']}}</span>
    </div>
</template>
<script>
    export default{
        mounted(){
            // 发射'setDate'事件到users模块 既是调用xuex中的方法
            this.$store.dispatch('users/setDate','传参')
        }
    }
</script>

import Vue from 'vue
import Vuex from 'vuex
Vue.use(Vuex)
export default new Vuex.Store({
    modules:{
        users
    }
}

const state = {
    message:'我是user模块'
}
const getters = {
    getModuleData(state,getters){
        return state.message
    }
}
const mutations = {
    SET_DATE(state,params){
        state.message = params
    }
}
const actions = {
    setDate({commit,dispatch,getters,state,rootState,rootGetters},params){
        commit('SET_DATE',params)    // 提交至'mutations'来修改仓库中的数据
    }
}
export default{
    namespaced:true,
    state,
    mutations,
    actions,
    getters,
}

五、使用map辅助函数操作Vuex

mapState、mapGetters、mapmutations、mapactions辅助函数必须是数组或者对象

<template>
    <div class="use_store">
    1.直接通过mapState获取仓库中的数据
        <span>{{message()}}}</span>
    2.巧用'getters'获取仓库中的数据
        <span>{{getReturnData}}</span>
    </div>
</template>
<script>
     // 导入方法 import {mapState,mapGetters,mapMutations,mapActions} from 'vuex
    export default{
        mounted(){
            // 发射'setDate'事件到vuex 既是调用xuex中的方法
            
        },
        methods:{
            // 获取的是一个方法
            
            ...mapState({
                // 主仓库中的数据
                message:state => state.message
                // 获取模块中的数据
                message:state => state.users.message
            }),
            
             // 主仓库中的数据
            ...mapGetters(['getReturnDatas']) 
            // 获取模块中的数据(注意：其他辅助都可以使用数组和对象两个方式进行映射)
            ...mapGetters('users',['getReturnData']) 
            ...mapGetters('users',{
                getMethod:'getReturnData'
            })
            
            // 主仓库中的数据
            ...mapActions(['setDate'])
             // 获取模块中的数据
            ...mapActions(''users,['setDate'])
            
            // 主仓库中的数据
            ...mapMutations(['SET_DATE'])
             // 获取模块中的数据
            ...mapMutations(''users,['SET_DATE'])
            
            getUser(){
                //使用辅助函数
                this.message()
                this.getReturnDatas()
                
                this.setDate('我是参数')
                this.SET_DATE('我是参数')
            }
            
        }
    }
</script>

import Vue from 'vue
import Vuex from 'vuex
Vue.use(Vuex)
export default new Vuex.Store({  
    state:{
        message:'主仓库'
    },
    getters:{
       getReturnDatas(state,getters){ 
          return  state.message 
       },
    },
    mutations:{ 
       SET_DATE(state,params){ 
          state.message = params 
       } 
    },
    actions:{
       setDate({commit},params){
          commit('GET_DATE',params)
        }
     }
    
    modules:{ 
        // uers模块
        users:{
          state:{
              message:'子模块' 
          }, 
          getters:{ 
             getReturnData(state,getters){ 
                 return state.message 
           }，
          mutations:{ 
             SET_DATE(state,params){ 
                 state.message = params 
             } 
          },
          actions:{
            setDate({commit},params){
                commit('GET_DATE',params)
            }
          }
       }
    }
})