03-初步使用vuex中的getters_如何激活vuex里的getters-CSDN博客

本文链接：https://blog.csdn.net/limeng19/article/details/118033958

本文通过一个具体案例展示了如何使用Vuex进行状态管理，包括创建store、定义state、mutations及getters，并在Vue组件中调用store中的数据。

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

1-改造02案例中的vuex，具体代码如下：

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        curIdx: 0,
        name: '李一就',
        age: 35
    },
    mutations: {
        setIdx(state, index) {
            state.curIdx = index;
        }
    },
    getters: {
        getMyInfo(state) {
            return "我的名字叫" + state.name + " , 今年有" + state.age + "岁了。"
        }

    },
    actions: {},
    modules: {}
})

2-新建part1组件,代码如下:

<template>
  <div>
      {{myinfo}}
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
export default {
  components: {
  },
  // 定义属性
  data() {
    return {
        myinfo:'ni hao '
      
    }
  },
 
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.myinfo = this.$store.getters.getMyInfo;
    
    
  },
  
}
</script>

<style lang='stylus' scoped>
  
</style>

3-在app里引用part1，代码如下：

<template>
  <div id="app">
    <my-part/>
  </div>
</template>
<script>
import myPart from '@/components/part1'
export default {
  name:'App',
  components: {
   myPart
  },
  data () {
    return {
     
    }
  },
  methods: {
    
  }
}
</script>

4-效果如下