对vuex的理解

vuex是什么

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

2 什么时候使用 Vue

1. 多个组件依赖于同一状态 2. 来自不同组件的行为需要变更同一状 态

Vuex 工作原理

• state属性是Vuex中用于存放组件之间共享的数据

• actions接收一个对象包含多个响应用户动作的回调函数，用于联系Mutations

• mutations 值是一个对象，包含多个直接更新 state 的方法

• getters 值为一个对象，包含多个用于返回数据的函数

使用方式

安装vuex

由于我使用的是vue2版本 所以使用vuex@3版本

如果是vue3 就要使用vuex@4版本 不然会报错

创建store

// 该文件用于创建Vuex中最为核心的store

import Vue from 'vue'

// 引入Vuex
import Vuex from 'vuex'

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

// 准备actions -- 用于响应组件中的动作
const actions = {
   

}

// 准备mutations -- 用于操作数据(state)
const mutations = {
  
}
// 准备getters --用于将你state中的数据进行加工
const getters = {
 
}


// 准备state -- 用于存储数据
const state = {
  
}

// 暴露store
export default  new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

别忘了在main.js中引入store

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App'

// 引入store
import store from './store'

Vue.config.productionTip = false
// 使用插件

// 创建vm
new Vue({

new Vue({
  render: h => h(App),
  store, 
}).$mount('#app')

部署完store后，实例上就出现了新的属性store

在state中部署数据，在页面中通过$store.state.xxx 展示

 <h2>{{  $store.state.daiseng }}</h2>

添加方法

    DaisengAgeAdd() {
            this.$store.dispatch('daisengJia')
        },

在methods通过 this.$store.dispatch('xxx') 添加方法交给actions

特点:

1.异步操作，通过mutations来改变state。

2.不能直接改变state里的数据。

3.包含多个事件回调函数的对象。

4.执行方式：通过执行 commit()来触发 mutation 的调用, 间接更新 state

5.触发方式: 组件中: $store.dispatch(‘action 名称’, data1)

6.可以包含异步代码(例如：定时器, 请求后端接口)。

Vuex 的 store 中的状态是响应式的，所以当我们变更状态时，监视状态的 Vue 组件也会自动更新。

触发方式: this.$store.commit("GETMODULESELECTLIST");

dispatch是提交执行actions中的方法，action 提交的是Mutations,可以是异步操作。action不可以修改store中的数据，需要commit mutation中的方法进行数据修改

getters中的访问器函数，默认会传递2个参数(state, getters)，使用第一个参数state可以访问数据，使用getters参数可以访问访问器中的其它访问器函数。大部分情况下只需要使用第一个参数，定义访问器函数就只写第一个参数即可

vuex辅助函数

当我们的组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余，为了解决这个问题，我们可以使用mapState的辅助函数来帮助我们生成计算属性。

引入

mapState

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。

mapActions 和 mapMutations

同样,如果一个方法或多个方法需要在多个页面和组件中使用，那么，可以使用mapActions与mapMutations

mapGetters

可以看到，函数的实现套路差不多，甚至更简单一些，实际上就是做了一层函数包装。

vuex模块化编码

介绍

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿(拥挤)。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

我们也可以把每个模块拆分成一个文件

index作为一个管理者，把每一个拆分的模块进行引入注册

通过new Vuex.Store({})

在modules中进行模块化的注册

使用

可以看到， state中发生了变化，是我们拆分出来的模块

部署数据时 $store.state.模块名.数据

在进行使用时 添加方法需要在前面加上自己的模块名

getter要使用[]的写法

辅助函数使用

如果要使用辅助函数，需要在对应的模块开启命名空间

namespaced: true

在使用时在前面写下模块名， 后面需要部署的数据