Vue3.0 Vuex传值

撩川

已于 2022-05-09 11:36:47 修改

阅读量899

点赞数

文章标签：前端 javascript 开发语言

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

本文链接：https://blog.csdn.net/weixin_56529686/article/details/124662599

版权

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

摘要由CSDN通过智能技术生成

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("set