vuex简单使用

本文详细介绍了如何在Vue项目中安装和使用Vuex,包括设置state、mutations、actions和getters,以及如何通过组件访问和修改全局状态。通过实例展示了如何改变主题色、处理用户信息,并通过点击事件触发状态更新。最后,文章提到了getters的使用,根据用户type返回不同的信息。
摘要由CSDN通过智能技术生成

vuex的简单使用
首先先新建一个vue项目

npm install vuex --save

在src>store>index.js中添加

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

这样vuex就可以使用了
打开src/store/index.js,讲解一下属性

    // state 存储 全局变量
    state: {},
    //   mutations  修改存储的变量
    mutations: {},
    // actions 提交的是 mutations 可以实现异步操作,相当于我们执行一个操作后可以改变 存储的值
    actions: {},
    // 分模块管理
    modules: {}

首先先加一点东西

  state: {
    // 当前主题色设置为red
    primaryColor:'red'
  },

修改HelloWord内容

<template>
  <div><h2 :style="{ color: primaryColor }">vuexdemo</h2></div>
</template>

<script>
export default {
  computed: {
    primaryColor() {
      // 这个可以拿到 index.js里面的state里面的 color  red
      return this.$store.state.primaryColor;
    },
  },
};
</script>

接着页面会出现vuexdemo红色
如果想传多个属性

index.js 可以加入多个属性
// state 存储 全局变量
  state: {
    // 当前主题色设置为red
    primaryColor: 'red',
    size: '40px'
  },

修改HelloWord内容

<template>
  <div>
  <h2 :style="{ color: primaryColor,fontSize:size }">vue</h2>
  </div>
</template>

<script>.
//这里需要引入
import { mapState } from "vuex";
export default {
  computed: {
  //...进行展开获取mapState里面的所有内容
    ...mapState(["primaryColor","size"])

  },
 // --------------------------------(上下两种写法即可)
   computed:mapGetters(["primaryColor","size"]),
</script>

然后观看页面会发生字体变大
mutations里面定义一个修改颜色的方法

mutations: {
  setColor(state, value) {
  // 传递的value值 给 state的 primaryColor
    state.primaryColor = value;
  }
},

HelloWord页面触发

methods: {
  setColor() {
    this.$store.commit("setColor", "skyblue");
  }
},

页面使用

<button @click="setColor">设置用户默认主题色</button>

首先我们在index.js里面的 state 中再定义一个 user对象

state: {
  user: {
    id: 1,
    type: 1,
    sex: 1,
  }
},

然后在 index.js getters中定义一个userInfo,根据不用用户的不同 type返回具体的字段

//这个方法是自己添加的 【getters】我们可以理解为store的计算属性
getters: {
  userInfo(state) {
    switch (state.user.type) {
      case 1:
        return "用户组"
      case 2:
        return "管理员组"
    }
  }
},

HelloWord页面引用

//mapGetters这个名字是不可更改的
import { mapGetters} from "vuex";
...mapGetters(["userInfo"])

HelloWord页面页面中使用

<div>{{userInfo}}</div>

这时候页面显示的是用户组。因为我们 type: 1,这里设置了1
如果想进行修改可以添加事件
点击按钮内容修改

<template>
  <div>
    <button @click="setUserColor">点击测试内容</button>
    {{userInfo}}
  </div>
</template>

<script>
import {  ,mapGetters} from "vuex";
export default {
  computed: {
    ...mapGetters(["userInfo"])
  },

  methods:{
    setUserColor() {
     this.$store.state.user.type=2
    }
  }
};
</script>

效果点击按钮页面内容用户组变成了管理员组

参考链接

https://blog.csdn.net/weixin_43815680/article/details/109147881?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_utm_term-0&spm=1001.2101.3001.4242
### Vuex 使用场景 #### 场景描述 Vuex 是专门为 Vue.js 应用程序设计的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以规则保证状态以一种可预测的方式发生变化。 --- ### 优势分析 #### 集中式状态管理 通过将所有的状态都存放在单一的地方,使得整个应用程序中的数据流更加清晰可控[^1]。 #### 易于调试 由于所有状态变更都被记录下来并可以通过插件查看,这大大提高了开发过程中的可见性和可维护性[^3]。 #### 数据一致性保障 当多个视图依赖同一份状态时,使用 Vuex 能够确保这些视图之间的同步更新,从而保持界面的一致性。 --- ### 劣势分析 #### 学习曲线陡峭 对于初学者来说,理解如何正确配置 store、mutation 和 action 并不是一件容易的事情;而且其 API 较为复杂,在一定程度上增加了学习成本[^2]。 #### 开发效率较低 相较于直接操作 props 或者事件传递方式来共享数据而言,每次想要修改某个属性都需要经过严格的流程(即提交 mutation),这对于小型项目可能显得有些繁琐。 #### 不适合简单应用场景 如果只是处理少量全局变量或局部交互逻辑,则引入完整的 Vuex 解决方案可能会造成资源浪费,因为此时简单的响应式对象就足以满足需求了。 ```javascript // 示例:定义一个简单Vuex Store const store = new Vuex.Store({ state: { count: 0, }, mutations: { increment(state) { state.count++; } }, actions: { incrementAsync({ commit }) { setTimeout(() => { commit('increment'); }, 1000); } } }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值