vuex 集中式数据管理vue插件

VueX

 

1、定义：

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

全局事件总线实现多组件数据共享的方式

使用vuex实现多组件共享数据的方式

Vuex的结构

2、什么时候使用vuex:

         多个不同组件需要共享使用同一状态（数据）的时候

1. 搭建vuex环境

     a、安装vuex npm i vuex@3   (vue2 使用版本3，vue3使用版本4)

     b、创建文件：src/store/index.js

const actions = {}

const mutations = {}

const state = {}

         c、在main.js中创建vm时，传入store配置项

1. 基本使用

a、初始化数据（在state里），配置actions、配置mutations、操作文件store.js

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

c、组件中修改vuex中的数据：$store.dispatch(‘actions中的方法名’，数据)

           或$store.commit(‘mutation中的方法名’，数据)

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

getters相当于计算属性，对state数据进行计算（根据不同的业务场景）

mapState 和mapGetters

对state和getters的数据进行映射为计算属性

mapMutations和mapActions

多组件共享数据

Vuex模块化+命名空间

优点：使用模块化可以让代码更好的维护，让不同的状态（数据）以不同的分类模块进行处理，同时在开发过程中，不同模块的分开开发，有利于项目的高效开发

实现方法：

在store.js中

创建一个模块，将vuex的方法放到该模块中去，同时开启命名空间

const xxxx(模块名) = {

        namespaced: true,  //开启命名空间

        state:{...},

        mutations:{...},

        actions:{....},

        getters:{....}

}

const store = new Vuex.Store({

        modules:{

       xxxx(模块名),

}

})vue