关于vuex的原理及使用方法

更新时间：2025年01月15日 15:02:05 作者：Cshaosun

Vuex是Vue.js应用的状态管理模式,用于集中式管理应用状态,它包括state、getters、mutations、actions和modules等模块,适用于多组件共享的数据管理

简介

Vuex 是 Vue.js 应用的状态管理模式，它为应用内的所有组件提供集中式的状态（数据）管理。

可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。

Vuex的构成

state：state 是 Vuex 的数据中心，也就是说state是用来存储数据的。
getters：state 对象读取方法。Vue Components 通过该方法读取全局 state 对象。
mutations：状态改变操作方法。是 Vuex 修改 state 的唯一推荐方法，其他修改方式在严格模式下将会报错。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些 hook 暴露出来，以进行state 的监控等。
actions：操作行为处理模块。负责处理 Vue Components 接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台 API 请求的操作就在这个模块中进行，包括触发其他 action 以及提交 mutation 的操作。该模块提供了 Promise的封装，以支持 action 的链式触发。
modules：将 Store 分割成模块，每个模块拥有自己的 State、Getters、Mutations Actions。

Vuex的使用

1、安装 Vuex：npm install vuex。

2、创建store示例

store对象

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

在 Vue 根实例中注册store

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

在组件中使用 Store

export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
};

使用Vuex内容扩展

在真正开发中使用vuex时会有好多细节知识和注意事项，下面我们扩展一下，仅供参看

Vue 组件中获得 Vuex 状态(State)

方式一： this.$store.state获取

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到

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

方式二： mapState 辅助函数获取（推荐）

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

<template>
    <div>{{count}}</div>
</template>
<script>
import { mapState }from 'vuex
export default{
    computed:{
        ...mapstate(['count'])
    }
}
</script>

Getter的定义和获取方式

定义getters：

需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它

【下面getters引用的state中的数据：list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]】

getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
    filterList:  state =>  state.list.filter(item => item > 5)
}

获取getters：

方式一：通过属性访问

this.$store.getters.filterList

方式二：辅助函数 - mapGetters

<template>
    <div>{{filterList}}</div>
</template>
<script>
import { mapGetters }from 'vuex
export default{
    computed:{
        ...mapGetters(['filterList'])
    }
}
</script>

Vue组件中调用Vuex：mutations中的方法

直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)
通过 mapMutations 映射

1、默认根级别的映射 mapMutations([ ‘xxx’ ])

2、子模块的映射 mapMutations(‘模块名’, [‘xxx’]) - 需要开启命名空间

方式一：普通调用方式

this.$store.commit('addCount') 此为不带参数的写法
this.$store.commit('addCount', 10) 此为带参数写法

<template>
    <div @click="addData">{{count}}</div>
</template>
<script>
export default{
    methods: {
        addData() {
            this.$store.commit('increment')
        }
    }
}
</script>

方式二：辅助函数- mapMutations

mapMutations是将所有mutations里面的方法映射为实例methods里面的方法

<template>
    <div @click="addData">{{count}}</div>
    <div @click="increment">{{count}}</div>
</template>
<script>
export default{
import  { mapMutations } from 'vuex'
    methods: {
        // 有别名的写法[对应第一行div]
        ...mapMutations({
             addData:'increment'
         })
        // 同名的简写[对应第二行div]
        ...mapMutations(['increment'])
    }
}
</script>

Vue组件获取Vuex：actions中的方法

直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
通过 mapActions 映射

1、默认根级别的映射 mapActions([ ‘xxx’ ])

2、子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间

方式一：普通调用方式

this.$store.dispatch('increment')
this.$store.dispatch('increment',{num: 10})

<template>
    <div @click="addData">{{count}}</div>
</template>
<script>
export default{
    methods: {
        addData() {
            this.$store.dispatch('increment')
        }
    }
}
</script>

方式二：辅助函数 -mapActions

mapActions 是把位于 actions中的方法提取了出来，映射到组件methods中

<template>
    <div @click="increment">{{count}}</div>
</template>
<script>
export default{
import  { mapActions } from 'vuex'
    methods: {
        ...mapActions (['increment'])
    }
}
</script>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue2.x+webpack快速搭建前端项目框架详解
本文给大家介绍了vue2.x、webpack、vuex、sass+axios、elementUI等快速搭建前端项目框架的详细操作方法，需要的跟着学习下吧。
2017-11-11
使用vant 自定义弹框全过程
这篇文章主要介绍了使用vant 自定义弹框全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
vue+echarts实现中国地图流动效果(步骤详解)
这篇文章主要介绍了vue+echarts实现中国地图流动效果(步骤详解),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01
Vue3+Ts+Vite项目websoket封装使用方式
文章介绍了如何封装WebSocket并进行页面使用,包括安装npm、创建websocket.ts文件、配置请求地址、全局类型声明以及在页面中引用和注册
2025-10-10
Vue-Cli配置代理转发解决跨域问题的方法
本文主要介绍了Vue-Cli配置代理转发解决跨域问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
vite打包部署图标偶尔乱码的问题及解决过程
文章介绍了在使用Vite+Vue3项目打包时遇到的自定义图标偶尔乱码问题的解决方法,通过研究vite.config.js的配置项,发现将cssMinify设置为false可以解决图标乱码问题,同时并不会显著增加打包文件的大小
2025-12-12
Vue配置文件中的devServer proxy配置全过程
文章介绍了如何在代理服务器中配置axios请求,包括单个接口和多个接口的情况,通过配置proxy,可以将请求转发到不同的后端服务器,并且可以处理跨域请求和路径重写
2025-12-12
使用Vue CLI创建typescript项目的方法
这篇文章主要介绍了使用Vue CLI创建typescript项目的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
vue中的keep-alive用法指南
keep-alive是Vue中的一个内置组件,用于缓存非活动组件实例,避免重复渲染,优化性能,本文给大家介绍vue中的keep-alive用法指南,感兴趣的朋友一起看看吧
2024-10-10
Vue中使用表单验证+CRUD方式
本文介绍了如何在后台添加数据接口,并详细讲解了如何在前端使用表格进行增删改查操作,包括新增、修改和删除功能的实现,以及如何使用表单验证确保数据的准确性
2026-03-03