vue3 中vuex状态管理

vue3中的vuex 总体和vue2的用法是一样的，只不过现在使用收拾直接在setup 函数中使用并返回了。
下边看看示例

首先我们先创建几个页面一个是store 文件夹，一个是索要演示的页面。
在这里插入图片描述

在这里插入图片描述
store文件夹 index

import { createStore } from "vuex";
export default createStore({
  state: {
    // 基础数据
    num1: 1,
    num2: 3,
  },
  getters: {
    dobule1(state) {
      console.log(state, "计算属性dobule1，获取基础state");
      return state.num1 * 2;
    },
    dobule2(state) {
      console.log(state, "计算属性dobule2，获取基础state");
      return state.num2 * 2;
    },
  },
  mutations: {
    // 同步方法
    changeNum1(state, payload) {
      console.log(state, payload, "changeNum1");
      state.num1 = payload;
    },
    changeNum2(state, payload) {
      console.log(state, payload, "changeNum2");
      state.num2 = payload;
    },
  },
  actions: {
    // 异步方法
    timeCunm1({ commit, state }) {
      console.log(commit, state, "timeCunm1异步获取，查看");
      setTimeout(() => {
        commit("changeNum1", 44);
      }, 2000);
    },
    timeCunm2({ commit, state }) {
      console.log(commit, state, "timeCunm2异步获取，查看");
      setTimeout(() => {
        commit("changeNum2", 55);
      }, 2000);
    },
  },
  modules: {},
});

需要的页面

<template>
  <div>
    <h1>{
   
   { $store.state.num1 }}</h1>
    <h2>getter :{
   
   { $store.getters.dobule1 }}</h2>
    <button @click="cnum1(11)">修改num1-- {
   
   { $store.state.num1 }}</button>
    <button @click="cActionNum1">修改action {
   
   { $store.state.num1 }}</button>
    <hr />
    <h3>num2: {
   
   { num2 }}</h3>
    <h3>getters: {
   
   { dobule2 }}</h3>
    <button @click="cnum2(33)">修改num2-- {
   
   { num2 }}</button>
    <button @click="cActionNum2">修改action-- {
   
   { num2 }}</button>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  setup() {
    const store = useStore();

    return {
      num2: computed(() => {
        return store.state.num2;
      }),
      dobule2: computed(() => store.getters.dobule2),
      cnum2: (newNum) => {
        console.log(newNum, "接收传递的参数33");
        store.commit("changeNum2", newNum);
      },
      cActionNum2: () => {
        store.dispatch("timeCunm2");
      },
    };
  },

  //   vue2
  methods: {
    cnum1(name) {
      this.$store.commit("changeNum1", name);
    },
    cActionNum1() {
      this.$store.dispatch("timeCunm1");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

vue3 中vuex状态管理

猜你喜欢