vuex状态管理-逆战班

vuex

一、是什么

是一个专为vue.js应用程序开发的转态管理（共享）

二、如何用

提示：若在创建项目时没有安装vuex，则需要执行第一步；若在创建项目时，已选择安装了vuex，则可以跳过第一步，直接第二不

第一步：安装

npm方式：npm install vuex --save
cnpm方式：cnpm i --save vuex
yarn方式：yarn add vuex

第二步：引入

import Vuex from 'vuex'

第三步：导出vuex的store库

export default new Vuex.Store({})

三、核心概念

（一）state

用于存放公共状态（全局状态）

（二）mutation

提交更新数据的方法，通过commit提交且必须是同步的，若是异步的则需要在action中通过commit提交

唯一修改状态的地方

（三）action

支持异步操作，需要通过提交mutation来变更状态，不能直接更改

（四）getter

对“全局状态”进行数据处理，类似于vue中的计算属性

（五）module

模块化vuex，在vuex中只能有一个store，为了防止多人修改，我们可切割成子store，再通过module合并成唯一一个大的store对象，这样可以让每一个模块拥有自己的state、action、mutation、getter，使结构更清晰，方便管理

// 例如
import Vuex from 'vuex'
import 模块名 from '路径'
export default new Vuex.Store({
    state: {
        // 存放公共状态
        mylist:[]
    },
    mutations: {
        // state自定义形参，vuex默认会把state传递给mutation
        myway (state) {
            //各种操作
        }
    },
    actions: {
        // store为自定义形参，vuex会默认把store传递给action
        myways (store) {
            //各种操作，然后通过commit传递参数
            store.commit()
        }
    },
    getters: {
        // 操作
        // 与mutation一样，在getter中的方法，vuex也会默认传递一个state参数
    },
    modules: {
        // 若自定义名和模块名一样，则可以直接简写，例如（tabbar:tabbar==>tabbar）
        自定义名：模块名
    }
})

四、提交方式（同步与异步）

（一）同步

Vue component需要通过commit提交mutation

this.$store.commit('mutation方法名')

（二）异步

Vue component需要通过dispatch到action，再从action中通过commit提交到mutation

this.$store.dispatch('action方法名')
// store为action方法中的形参
store.commit('mutation方法名')

五、辅助函数（切割函数）

mapState、mapMutations、mapGetters、mapActions

当使用辅助函数时，则需要给每个模块开启命名空间

namespaced: true

使用方法

// 在没有使用vuex的辅助函数时，我们使用时会很长，例如
this.$store.state.状态名
this.$store.dispatch('action方法名')
this.$store.commit('mutation方法名')
// 使用后
// 第一步先引入
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
// 第二步
...mapState('模块名', ['state状态名'])
...mapMutations('模块名', ['mutation方法名'])
...mapActions('模块名', ['action方法名'])
// 第三步,可直接通过this访问
this.state状态名
this.mutation方法名
this.action方法名

六、其他

缓存后端数据，提高用户体验

缓存数据：缓存数据存储于内存中，只要一刷新就会丢失

提示：在项目开发中详情页和订单页不适合使用vuex缓存

来源：CSDN

作者：ろうそくの銀

链接：https://blog.csdn.net/qq_43151676/article/details/104577863