vue2-vuex

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

应用场景:

• 多个组件依赖于同一状态、共享数据
• 来自不同组件的行为需要变更同一状态
• vuex

vuex原理

每一个 Vuex 应用的核心就是 store，里面又包括:

1. State（状态）：用于数据的存储（对象类型数据），是store中唯一数据源
2. Actions（行为）：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步事件
3. Mutations（转变）：类似函数，改变state数据的唯一途径，且不能用于处理异步事件，Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方
4. Getter（数据加工）：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关计算
5. Module：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

vuex环境

1. 安装vuex

   vue2:使用vuex3版本

   vue3:使用vuex4版本

   # 安装3版本
    npm i vuex@3
   

2. 创建Store

   创建store文件夹，下面创建index.js (官方推荐) or 创建vuex文件夹，创建store.js文件,自定义写法

   import Vue from "vue"
   import Vuex from "vuex"
   
   // 使用vuex插件，使用之后，创建vm的时候，可以传入store配置项
   // new Vuex.Store 必须使用了Vuex之后，否则报错
   // 如果在main.js 使用 然后引包，脚手架会先执行所以import代码再执行其他代码 也会报错
   Vue.use(Vuex)
   
   // 定义actions-用于响应组件中的动作(mutations)
   const actions = {}
   
   // 定义mutations-用于操作数据（state）
   const mutations = {}
   
   // 定义state，用于存储数据
   const state = {}
   
   // 创建Store
   const store = new Vuex.Store({
       actions,
       mutations,
       state
   })
   
   // 暴露store
   export  default store
   

   ​

3. 配置store

   // main.js
   
   import  store from "./store"
   
   new Vue({
       render: h => h(App),
       store // 配置导入的store,在vm和vc身上可以通过.$store访问
   
   }).$mount('#app')
   

基本使用

1.初始化数据

// 定义state，用于存储数据
// 数据被mutations修改
const state = {
    // 定义一个count
    count: 0
}

2. 配置actions

// 定义actions-用于响应组件中的动作(mutations)
// 该对象中的方法用于commit响应mutations中的方法操作数据
// 该对象被dispatch触发
const actions = {
    // 定义add方法
    // context:上下文对象，包含commit、dispatch、getter、state、roomGetter、rootState
    // value是调用方传递的值
    add: function (context, value) {
        // 将数据提交到ADD方法(mutations中定义的)，此时不会直接修改数据
        // 可以通过context.dispatch触发其他actions
        context.commit("ADD", value)

    }
}

3. 配置mutations

// 定义mutations-用于操作数据（state）
// 该对象被actions中的commit and 其他地方的commit触发
const mutations = {
    ADD(state, value) {
        // state是数据对象，包含getter、setter等
        // value是调用方传递的值
        // 通过数据对象操作数据，此时会直接修改值
        state.count += value

    }

}

4.操作store.js

methods: {
  increment(){
    // 触发回调的时候 调用$store.dispatch，调用actions里的add方法，参数是n
    // actions相当于一个中转，如果参数需要做其他逻辑处理调用dispatch

    this.$store.dispatch("add",this.n)

    // 也可以直接操作this.$store.commit("ADD",this.n)，调用mutations里的ADD方法
    // 如果不需要其他逻辑处理，直接修改数据调用commit
    this.$store.commit("ADD",this.n)

  }

5.模版中访问

<!-- 模版中直接通过$store访问 -->
{{$store.state.count}}

getters配置项

getters的功能类似于 Vue 组件中的计算属性。它们都是用于对已有的数据（在 Vuex 中是state）进行计算或者过滤后返回一个新的值

1. 定义getters

   // 用于将state中的数据进行加工
   const getters = {
       // 定义一个doubleCount属性
       doubleCount(state){
           // state 是数据对象
           return state.count * 2
   
       }
   }
   
   const store = new Vuex.Store({
       actions,
       mutations,
       state,
       getters
   })
   
   

2. 使用getters

   this.getters.doubleCount
   

   <!-- 模版中使用 -->
   {{$store.getters.doubleCount}}
   

store中的map方法

mapState

用于帮助我们映射state中的数据为计算属性

   ```js

import {mapState} from "vuex";

computed: {

// 对象写法 等同于 count(){{return this.$store.state.count}}

// 如果要修改state中的值 可以写箭头函数返回

...mapState({count: "count", count2: (state)=> state.count * 2}),

// 数组写法

// 等同于 count(){return this.$store.state.count}

// 相当于把stage中的数据以同名的方式映射到计算属性中

...mapState(["count"])

}

```

mapGetters

用于帮助我们映射getters中的数据为计算属性

      ```js

import {mapGetters} from "vuex"

computed: {

// 数组写法 doubleCount(){ return this.$store.getters.doubleCount}

...mapGetters(["doubleCount"]),

// 对象写法 doubleCount(){ return this.$store.getters.doubleCount}

...mapGetters({doubleCount: "doubleCount"})

}

```

mapActions

用于帮助我们生成与actions对话的方法，即：包含$store.dispatch()的函数

import {mapActions} from 'vuex'

	methods: {

      //  等同于 addCount(){this.$store.dispatch("add",value)}
      // 这里的value 需要在使用此回调函数的地方绑定 @click="addCount(要传递的参数)"
      // 如果不在使用的地方绑定，则ADD方法内部收到的value 是点击事件
      ...mapActions({addCount: "add"}),

        // 数组写法，原理与mapState一致
      ...mapActions(["add"]),
    },

mapMutations

用于帮助我们生成与mutations对话的方法，即：包含$store.commit()的函数

import {mapMutations} from 'vuex'

	methods: {

      //  等同于 increment(){this.$store.commit("ADD",value)}
      // 这里的value 需要在使用此回调函数的地方绑定 @click="increment(要传递的参数)"
      // 如果不在使用的地方绑定，则increment方法内部收到的value 是点击事件
      ...mapMutations({increment: "ADD"}),

        // 数组写法，原理与mapState一致
      ...mapMutations(["ADD"]),

    },

vuex模块化&命名空间

当 Vue 应用规模变大时，store中的状态（state）、变更操作（mutations）、异步操作（actions）和获取器（getters）也会变得复杂繁多。Vuex 模块化允许将store分割成多个模块，每个模块都有自己独立的state、mutations、actions和getters，就像有多个小的 Vuex store一样。

模块化使得代码结构更加清晰，便于团队开发和维护。不同的功能模块可以有各自独立的状态管理逻辑，例如一个电商应用中，可以有用户模块、商品模块、订单模块等，每个模块管理自己相关的状态和操作

模块化

• 包含多个 module ，一个 module 是一个 store 的配置对象 与一个组件（包含有共享数据）对应

1. 定义模块

   // 自定义一个对象，里面包含vuex的对方方法
   const sumOptions = {
       actions: {},
       mutations:{},
       state:{},
       getters:{sum:10}
   
   }
   
   // 自定义一个对象，里面包含vuex的对方方法
   const countOptions = {
       actions: {},
       mutations:{},
       state:{count:20}
   
   }
   
   //创建并暴露store
   export default new Vuex.Store({
       // 模块配置
       modules: {
           // store里面有一个sum模块，对应的是sumOptions对象里面的方法
           sumModules: sumOptions,
   
           // store里面有一个count模块，对应的是countOptions对象里面的方法
           countModules: countOptions
       }
   
   })
   

2. 使用模块store数据

   {{$store.state.sumModules.sum}}
   

   this.$store.state.sumModules.sum
   

3. 通过map方法映射模块对象访问

       // 映射的是模块对象
       ...mapState(["sumModules","countModules"])
   

   <!--在模版中可以使用 {{模块名.属性访问}}-->
   {{sumModules.sum}}
   

命名空间

可以开启模块的命名空间，使用map方法的时候通过指定模块名字和属性、方法名字进行映射

1. 通过namespaced开启命名空间

   const sumOptions = {
       namespaced:true, // 开启命名空间
       actions: {},
       mutations:{},
       state:{sum:10},
   
   }
   

2. 读取指定模块的数据

   // 使用map读取
   // new store的时候指定的模块名、要映射的属性，其他map方法方法映射同理
   ...mapState("sumModules",["sum"])
   // {{sum}}
   

   // 自己直接读取  state.模块名.属性名
   this.$store.state.sumModules.sum
   

3. 读取getters数据

   // 使用map读取
   // 模块名，[要映射的数据]
   ...mapGetters('countAbout',['bigSum'])
   

   // 直接读取  模块名/属性名
   this.$store.getters['sumModules/doubleSum']
   

4. commit和dispatch

   // 直接读取
   //  模块名/方法名，参数
   this.$store.commit("sumModules/ADD",100)
   this.$store.dispatch("sumModules/add",100)
   

   // 使用map映射   模块名  [要映射的方法]
   ...mapMutations('sumModules',{setSum:'ADD'}),
   
   ...mapActions('sumModules',{commitSum:'add'})
   
   // 传参原理与未开启命名空间原理一致
   

模块化推荐设计

• store 文件夹：在项目的根目录下创建一个专门的store文件夹，用于存放所有与 Vuex 相关的代码。这个文件夹是整个 Vuex 模块管理的核心区域。
• 模块文件夹：在store文件夹内，为每个主要的功能模块创建一个单独的文件夹。例如，如果是一个电商应用，可以有user模块文件夹、product模块文件夹、order模块文件夹等。每个模块文件夹用于存放该模块相关的state、mutations、actions和getters的定义文件，export暴露给外部
• index中用于注册vuex插件、new vuex对象、导入所有模块，统一管理