Vuex在Vue3中的使用

最新推荐文章于 2024-07-16 14:24:04 发布

liguoyuan819

最新推荐文章于 2024-07-16 14:24:04 发布

阅读量1.1k

点赞数

分类专栏： Vue使用文章标签： vue

本文链接：https://blog.csdn.net/liguoyuan819/article/details/123938705

版权

本文介绍了在Vue3中使用Vuex的步骤，包括使用createStore创建store文件，如何在main.ts中引入并暴露store，以及在页面中如何导入和使用store。

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

在Vue3中使用Vuex的时候，发现与Vue2中的使用方式有所不同，故总结一下

1.使用createStore创建sotre文件

import { createStore } from 'vuex'

export default createStore({
  state: {
    
  },
  mutations: {
    
  },
  actions: {
    
  },
  modules: {
  },
  getters:{
    
  }
})

2.在main.ts文件中引入store文件暴露的内容

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/styles/index.scss'


createApp(App).use(store).use(router).mount('#app')

3.页面中使用

在页面中使用时，需要引入store文件暴露的内容

<script lang="ts">
import { ref } from '@vue/reactivity'
import $store from '../store/index'
import { computed } from '@vue/runtime-core'
export default {
    name:"Test",
    setup(){
        let n = ref(1);
        let sum = computed(() &#