Vuex的使用-爱伦尔生活百科

1.Vuex 概述

1.是什么

Vuex 是一个 Vue 的状态管理工具，状态就是数据。

Vuex的使用

大白话：Vuex 是一个插件，可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如：购物车数据个人信息数

2.使用场景

某个状态在很多个组件来使用 (个人信息)
多个组件共同维护一份数据 (购物车)

3.优势

共同维护一份数据，数据集中化管理
响应式变化
操作简洁 (vuex提供了一些辅助函数)

4.注意：

官方原文：

不是所有的场景都适用于vuex，只有在必要的时候才使用vuex
使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度（数据的操作更便捷，数据的流动更清晰）

Vuex就像《近视眼镜》, 你自然会知道什么时候需要用它~

2.Vuex的使用

新建 `store/index.js` 专门存放 vuex

为了维护项目目录的整洁，在src目录下新建一个store目录其下放置一个index.js文件。 (和 router/index.js 类似)

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store()

// 导出仓库
export default store

在 main.js 中导入挂载到 Vue 实例上

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

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

此刻起, 就成功创建了一个 空仓库!!

3.state

存数据

在state对象中可以添加我们要共享的数据。

// 创建仓库 store
const store = new Vuex.Store({
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别：
  // 1.data 是组件自己的数据, 
  // 2.state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 101
  }
})

访问数据

通过$store直接访问 —> {{ $store.state.count }}
通过辅助函数mapState 映射计算属性 —> {{ count }}

获取 store：
 1.Vue模板中获取 this.$store
 2.js文件中获取 import 导入 store


模板中：     {{ $store.state.xxx }}
组件逻辑中：  this.$store.state.xxx
JS模块中：   store.state.xxx

例子:

模板中使用

组件中可以使用 $store 获取到vuex中的store对象实例，可通过state属性属性获取count，如下

state的数据 - {{ $store.state.count }}

组件逻辑中使用

<h1>state的数据 - {{ count }}</h1>

// 把state中数据，定义在组件内的计算属性中
  computed: {
    count () {
      return this.$store.state.count
    }
  }

js文件中使用

//main.js

import store from "@/store"

console.log(store.state.count)

mapState

mapState是辅助函数，帮助我们把store中的数据映射到组件的计算属性中, 它属于一种方便的用法

1.第一步：导入mapState (mapState是vuex中的一个函数)

import { mapState } from 'vuex'

2.第二步：采用数组形式引入state属性

mapState(['count'])

上面代码的最终得到的是 类似于

count () {
    return this.$store.state.count
}

3.第三步：利用展开运算符将导出的状态映射给计算属性

  computed: {
    ...mapState(['count'])
  }

  state的数据：{{ count }}

4.mutations

基本使用

mutations是一个对象，对象中存放修改state的方法

mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state) {
      state.count += 1
    }
  },

调用

this.$store.commit('addCount')

传参

mutations: {
  ...
  addCount (state, count) {
    state.count = count
  }
},

使用

handle ( ) {
  this.$store.commit('addCount', 10)
}

小tips: 提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象

this.$store.commit('addCount', {
  count: 10
})

mapMutations

mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入到methods中

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}

上面代码的含义是将mutations的方法导入了methods中，等价于

methods: {
      // commit(方法名, 载荷参数)
      addCount () {
          this.$store.commit('addCount')
      }
 }

此时，就可以直接通过this.addCount调用了

但是请注意： Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中

5.actions

actions 是 Vuex 中用于处理异步操作和复杂逻辑的部分。

actions 类似于 mutations ，但有以下几个关键区别：

actions 可以处理异步操作，而 mutations 必须是同步的。这意味着在 actions 中，您可以进行网络请求、访问后端接口、执行耗时操作等。
actions 接收一个 context 对象作为参数，这个对象包含了 commit 方法（用于提交 mutations ）、state （状态）、getters （获取器）等。您也可以为 actions 方法定义额外的参数来传递数据。

定义actions

mutations: {
  changeCount (state, newCount) {
    state.count = newCount
  }
}


actions: {
  setAsyncCount (context, num) {
    // 一秒后, 给一个数, 去修改 num
    setTimeout(() => {
      context.commit('changeCount', num)
    }, 1000)
  }
},

组件中通过dispatch调用

setAsyncCount () {
  this.$store.dispatch('setAsyncCount', 666)
}

mapActions

mapActions 是 Vuex 中用于将 actions 映射到组件的方法。

它通常在 Vue 组件的 methods 选项中使用。通过 mapActions ，可以更方便地在组件中调用 store 中的 actions ，而无需手动使用 this.$store.dispatch 。

import { mapActions } from 'vuex';

export default {
  methods: {
  ...mapActions(['incrementAsync']),
  },
};

在这个组件中，就可以像调用普通方法一样直接使用 incrementAsync 方法，例如 this.incrementAsync() ，它会自动触发 store 中的相应 action 。

mapActions 可以接受一个数组或者对象作为参数，如果是数组，直接写 action 的名称；如果是对象，可以自定义映射后的方法名称。

6.gerrers

在 Vuex 中，getters 用于从 state 中派生数据。

getters 具有以下特点和用途：

计算属性：getters 可以基于 state 中的数据进行计算和处理，返回一个派生的值。这类似于组件中的计算属性，但它是在 Vuex 存储中定义的，并且可以被多个组件共享。
数据过滤和转换：您可以使用 getters 对 state 中的数据进行过滤、排序、格式化等操作，以满足不同组件对数据的特定需求。
缓存和高效性：getters 的结果会被缓存，只有当它们依赖的 state 发生变化时才会重新计算，提高了性能。

以下是一个 getters 的示例：

const store = new Vuex.Store({
  state: {
    items: [
      { id: 1, name: 'Item 1', price: 10 },
      { id: 2, name: 'Item 2', price: 20 },
      { id: 3, name: 'Item 3', price: 30 }
    ]
  },
  getters: {
    totalPrice: (state) => {
      return state.items.reduce((total, item) => total + item.price, 0);
    },
    expensiveItems: (state) => {
      return state.items.filter(item => item.price > 20);
    }
  }
});

在组件中，可以这样获取 getters 的值：

{{ $store.getters.expensiveItems }}

mapGetters

import { mapGetters } from 'vuex';

export default {
  computed: {
  ...mapGetters(['totalPrice', 'expensiveItems'])
  }
}

7.vuex模块化

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

这句话的意思是，如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护

由此，又有了Vuex的模块化

定义两个模块 user 和 setting

user中管理用户的信息状态 userInfo modules/user.js

const state = {
  userInfo: {
    name: 'zs',
    age: 18
  }
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

setting中管理项目应用的主题色 theme，描述 desc， modules/setting.js

const state = {
  theme: 'dark'
  desc: '描述真呀真不错'
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

在store/index.js文件中的modules配置项中，注册这两个模块

import user from './modules/user'
import setting from './modules/setting'

const store = new Vuex.Store({
    modules:{
        user,
        setting
    }
})

使用模块中的数据, 可以直接通过模块名访问 $store.state.模块名.xxx => $store.state.setting.desc

也可以通过 mapState 映射

获取模块内的state数据

直接通过模块名访问 $store.state.模块名.xxx
通过 mapState 映射：
1. 默认根级别的映射 mapState([ ‘xxx’ ])
2. 子模块的映射：mapState(‘模块名’, [‘xxx’]) - 需要开启命名空间 namespaced:true

获取模块内的getters数据

使用模块中 getters 中的数据：

直接通过模块名访问 $store.getters['模块名/xxx ']
通过 mapGetters 映射
1. 默认根级别的映射 mapGetters([ 'xxx' ])
2. 子模块的映射 mapGetters('模块名', ['xxx']) - 需要开启命名空间

获取模块内的mutations方法

直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)
通过 mapMutations 映射
1. 默认根级别的映射 mapMutations([ ‘xxx’ ])
2. 子模块的映射 mapMutations(‘模块名’, [‘xxx’]) - 需要开启命名空间

获取模块内的actions方法

直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
通过 mapActions 映射
1. 默认根级别的映射 mapActions([ ‘xxx’ ])
  tters 映射
2. 默认根级别的映射 mapGetters([ 'xxx' ])
3. 子模块的映射 mapGetters('模块名', ['xxx']) - 需要开启命名空间