vuex简单使用

最新推荐文章于 2022-12-09 15:50:49 发布

南玖i

最新推荐文章于 2022-12-09 15:50:49 发布

阅读量101

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_49789433/article/details/116203565

版权

vue 专栏收录该内容

54 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在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