vue3使用vuex实现页面实时更新数据实例教程(setup)

下面是详细讲解“vue3使用vuex实现页面实时更新数据实例教程(setup)”的完整攻略。

一、什么是Vuex

Vuex是一个专为Vue.js设计的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex中包含了：state，mutations，actions，getters和modules等模块。其中，state存放数据，mutations定义修改数据的方法，actions定义提交的方法，getters定义计算过程；modules则是对于state、mutations、actions和getters的封装和重用。

二、为什么要使用Vuex

在Vue.js中，每个组件都是独立的，如果想让一个组件的数据被另一个组件调用，需要通过props传递，而如果组件层级较深，props链会变得异常复杂，难以维护。同时，组件间的通信也变得非常麻烦。所以，为了解决这些问题，使用Vuex来实现集中式的数据管理是非常必要的。

三、使用Vuex实现页面实时更新数据的步骤

1. 安装Vuex
   我们可以使用npm或yarn来安装Vuex，具体命令如下：

npm install vuex --save

1. 创建一个Vuex的store
   我们可以利用“createStore”方法来创建一个vuex store，同时在store中定义了一个age属性和一个changeAge方法来改变age的值。代码如下：

import Vuex from "vuex";
import { createStore } from "vuex";

export default createStore({
  state: {
    age: 0,
  },
  mutations: {
    changeAge(state, payload) {
      state.age = payload;
    },
  },
});

1. 在Vue组件中引入Vuex store
   在Vue组件中，我们需要引入Vuex store，以便监听store数据变化。代码如下：

import { useStore } from "vuex";
import { ref, watchEffect } from "vue";

export default{
  setup() {
    const store = useStore();
    const age = ref(store.state.age);
    watchEffect(() => {
      age.value = store.state.age;
    });
    return {
      age,
    };
  },
};

1. 通过修改store中数据的方式，实现实时更新页面数据
   我们可以通过绑定changeAge方法，以及watchEffect监听数据的方式，实现store数据变化时，页面数据也会随之改变。具体代码如下：

import { useStore } from "vuex";
import { ref, watchEffect } from "vue";

export default{
  setup() {
    const store = useStore();
    const age = ref(store.state.age);
    watchEffect(() => {
      age.value = store.state.age;
    });
    const handleClick = (val) => {
      store.commit("changeAge", val);
    };
    return {
      age,
      handleClick,
    };
  },
};

四、示例说明

示例一：在store中添加新的属性

例如，在上述的store中，我们想要添加一个新的属性"name"，存储用户的名字，我们可以通过如下代码实现：

import Vuex from "vuex";
import { createStore } from "vuex";

export default createStore({
  state: {
    age: 0,
    name: "",
  },
  mutations: {
    changeAge(state, payload) {
      state.age = payload;
    },
    changeName(state, payload) {
      state.name = payload;
    },
  },
});

示例二：在组件中获取多个store中的数据

例如，我们有两个store，分别存储用户信息和订单信息，我们需要在组件中获取这两个store中的数据，并进行渲染。可以通过如下代码实现：

import { useStore } from "vuex";
import { ref, watchEffect } from "vue";

export default{
  setup() {
    const userStore = useStore("user");
    const orderStore = useStore("order");
    const user = ref(userStore.state.user);
    const order = ref(orderStore.state.order);
    watchEffect(() => {
      user.value = userStore.state.user;
      order.value = orderStore.state.order;
    });
    return {
      user,
      order,
    };
  },
};