vuex的简单使用

黑莲烈焰使

已于 2022-04-02 14:04:08 修改

阅读量154

点赞数

CC 4.0 BY-SA版权

文章标签： vue js

于 2021-01-29 19:49:58 首次发布

本文链接：https://blog.youkuaiyun.com/FantasyBreaker/article/details/113404616

Vuex 是Vue.js应用的状态管理库，它集中管理组件状态并确保状态变化可预测。当组件数量增加，数据传递复杂时，Vuex提供了解决方案。在项目中安装Vuex后，创建store目录，按模块拆分文件。在main.js引入并配置，定义state、mutation-types、actions和mutations。组件内可通过actions触发mutation改变状态，getters用于计算属性获取状态。取值可以通过computed、mapState（对象和数组方式）。getter适合处理状态，如格式化时间。Vuex简化了组件间数据交互和状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。当然组件之间传递可以使用emit，但页面组件越来越多涉及到数据传递就越来越麻烦，vuex的便利性就体现出来。

在我们的项目中，安装vuex

cnpm install vuex --save

在src目录中，创建store文件，并创建vuex中模块的文件名，每一个都单独拆分开，便于管理模块。也可以根据module划分，单个应用的写一个文件包含对应的整套状态和方法。
然后在你的main.js文件引入
在你的index.js相当于vuex的主目录，文件都在index.js文件引入（包括vue/vuex)
编写各文件内容。state文件定义所有的状态；mutation-types用于定义action和mutation变量，便于统一管理；action 提交的是 mutation，而不是直接变更状态；mutation提交更改state的唯一的状态； getters派发state的状态值，通过计算属性获取值。
传值；在任何一个组件都可以或获取到你在state存储的数据信息，在组件中使用。setUser就是在action定义的提交mutation的方法，decode要提交的数据。commit为同步提交，dispatch为异步提交。
this.$store.dispatch("setUser", decode);
取值
状态对象赋值给内部对象，也就是把store.js中的值，赋值给我们模板里data中的值。有三种赋值方式:
–>computed属性可以在输出前，对data中的值进行改变

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

–>通过mapState的对象来赋值

import {mapState} from 'vuex';


computed:mapState({
  count:state=>state.count //理解为传入state对象，修改state.count属性
 })

–>通过mapState的数组来赋值

computed:mapState(["count"])

store和getter都可以取值，getter用于需要对状态进行处理的场景，比如将得到的时间参数格式化等。
使用方法类似，调用属性替换为方法。

this.$store.getters.getCount

  computed: {
    ...mapGetters(['getCount'])
  },