在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 }
  }
}