在Vue3中使用vuex

官方文档
vue3+ts

一、安装

npm install vuex@next --save

二、创建并引入

1.新建store文件夹，在store目录下新建index.js

import { createStore } from 'vuex'
 
export default createStore({
  state: {
 
  },
  mutations: {
 
  },
  actions: {
 
  }
  modules: {
 
  }
})

2.在main.js中引入

import store from './store'
app.use(store)

3.简单使用

假设已定义count参数

<template>
    <!-- 1、直接取用 -->
    <p>{{ $store.state.count }}</p>
    <p>{{ count }}</p>
</template>
 
import { computed } from "vue"
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    // 2、使用计算属性的方式
    const num = computed(() => store.state.count)
    return { count }
  }
}