（二）定义和访问状态（state）

老怪兽

发布于 2023-02-22 19:03:32

23800

代码可运行

文章被收录于专栏：老怪兽的前端之旅老怪兽的前端之旅

运行总次数：0

代码可运行

定义和访问状态（state）

一、添加 `state` 数据

state

所有的全局数据都在 state 中，保存数据需要添加 state 函数，这里的 state 和 data 函数是一样的，里面可以是任何 javaScript 代码

import { createApp } from "vue";
import { createStore } from "vuex";
import App from "./App.vue";

const store = createStore({
  state() {
    return {
      num: 1,
      str: "string",
      bool: true,
      arr: [1, 2, 3],
      user: {
        id: 1,
        name: "John",
        age: 25,
      },
    };
  },
});

const app = createApp(App);

app.use(store);

app.mount("#app");

二、访问 `state` 数据

需要使用 computed 计算属性来获取 state 值，这样 state 的值改变了才会动态响应

computed: {
  num() {
    return this.$store.state.num;
  }
}

访问 state 数据的第二种方法

// 如果像上面一个一个的去获取非常麻烦
// 这时候 vue 给我们提供了一个 mapState 函数来把全局的数据映射到computed中
import { mapState } from "vuex"
export default {
  computed: {
    ownComputed() {
      return "自己的计算属性";
    },
    // 把state 中的数据映射到组件中 数组中的就是 state中的数据
    ...mapState(["num", "str", "bool", "arr", "user"]),
  }

  如果有复杂的逻辑，就需要写成对象函数的形式
  computed: mapState({
    num: (state) => state.num,
    num: "num",
    count: "num",
  })
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年11月15日，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript