02. vuex 中 state_state: () => ({是什么意思-CSDN博客

本文链接：https://blog.csdn.net/ojb98K/article/details/107730853

本文主要探讨在 Vuex 中如何管理和使用状态（State）。通过分析 `main.js` 文件和 `state.vue` 组件，了解 Vuex 如何在 Vue 应用中集中存储和管理全局状态，并学习如何在组件中注入和访问 State。

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

main.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  // data
  state: {
    count: 0,
    msg: 'hello world',
    num: 11,
    val: 12
  },
  // methods 外部用 this.$store.commit调用
  mutations: {
    addNum(state) {
      state.count++
    },
    setNum(state, val) {
      state.num = val
    }
  },
  // 异步方法
  actions: {
    
  },
  // 模块
  modules: {
  },
  // 相当于 computed getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
  getters: {

  }
})

state.vue

<template>
   <div>
     <h1>msg: {{msg}}</h1>
     <h3>num: {{num}}</h3>
     <h3>val: {{val}}</h3>
     <input type="text" v-model="resolve">
     <input type="text" :value="num" @change="changeValue">
   </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: "state",
    data() {
      return {
        nums: 'abc'
      }
    },
    // 第一种映射方式  数组方式
    // computed: mapState(['msg', 'num', 'val']),
    // methods: {
    //   changeValue: function (e) {
    //     this.$store.commit('setNum', e.target.value)
    //   }
    // }

    // 第二种映射方式  函数的方式
    // computed: mapState({
    //   msg: 'msg',
    //   num: (state) => state.num,
    //   val: function(state) {
    //     return this.nums + state.val
    //   }
    // })

    // 第三种映射方式  将mapState对象结构，成computed里面的属性
    computed: {
      resolve: function () {
        return this.nums.split('').reverse().join('')
      },
      ...mapState({
        msg: 'msg',
        num: (state) => state.num,
        val: function(state) {
          return this.nums + state.val
        }
      })
    }
  }
</script>

<style scoped>

</style>