Vue3.0 Vuex传值

原创

已于 2022-05-09 11:36:47 修改 · 991 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2022-05-09 11:32:30 首次发布

本文介绍如何在Vue3.0项目中利用Vuex进行组件间的数据传递和状态管理，通过创建store/index.ts文件配置Vuex store，然后在view/home和view/about视图中使用store中的状态和方法。

1.store/index.ts

import { createStore } from 'vuex'
export default createStore({
  state: {
    name: '默认值'
  },
  mutations: {
    setState(state, args) {
      state.name = args
    }
  },
  actions: {
    setStateName({ commit }, args) {
      commit('setState', args)
    }
  },
  getters: {
    getState(state) {
      return state.name
    }
  },
  modules: {
  }
})

2.view/home

<template>
  <div class="home">
    <div><button @click="FnSetStateName">给about传值</button></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "Home",
  setup() {
    const store = useStore();
    const FnSetStateName = function () {
      //Action 通过 store.dispatch 方法触发
      store.dispatch("setStateName", "这是home传的值");
    };
    return {
      FnSetStateName,
    };
  },
});
</script>