vuex中的mapState使用案例（对比data和计算属性）

最新推荐文章于 2024-03-14 12:03:14 发布

书院二层楼

最新推荐文章于 2024-03-14 12:03:14 发布

阅读量1.4k

点赞数

分类专栏： Vue 文章标签： Vue Vuex mapState

本文链接：https://blog.csdn.net/caoxinjian423/article/details/108967915

版权

本文通过案例介绍了Vuex中mapState的使用方法，对比了其与组件data及计算属性的区别。在`store/index.js`中配置了状态管理，然后在`App.vue`组件中利用mapState映射state到局部计算属性，实现了状态的获取和更新。更新前后的效果截图展示了mapState带来的变化。

摘要由CSDN通过智能技术生成

store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    msg:"Hello Vuex!",
    name:"cxj",
    age:18,
    hobby:"美女"
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

App.vue

<template>
  <div id="app">
    属性赋值dmsg：{
  {dmsg}}
    <hr>
    计算属性赋值cmsg:{
  {cmsg}}
    <hr>
    mapState数组赋值msg:{
  {msg}}
    <br>
    mapState数组赋值age:{
  {age}}
    <br>
    mapState对象赋值myMsg:{
  {myMsg}}
    <br>
    <button @click="handleClick">点击更新store中的msg</button>
  </div>
</template>

<script>
import {mapState} from 'vuex';

/*
dmsg:存在响应式丢失问题，即store中的msg更改后，不会变化
cmsg:属性较多时，比较麻烦
mapState是vuex提供