一：前言

? ? ? ? 使用 vuex 可以方便我們對數據的統一化管理，便于各組件間數據的傳遞，定義一個全局對象，在多組件之間進行維護更新。因此，vuex 是在項目開發中很重要的一個部分。接下來讓我們一起來看看如何使用 vuex 吧！

二：實現步驟

1、安裝依賴

????????使用 npm i vuex 來安裝 vuex 依賴

npm i vuex

2、創建文件與初始化

????????在 src 目錄下，新建路徑為 store/index.ts 的文件，其內部的代碼如下，在 state 里定義變量。

import { createStore } from 'vuex'
// 類似 Redux 中的建立狀態樹export default createStore({// 1、 存儲所有全局數據state: {person: {name: '張三',age: 20}},// 2、 需要通過計算獲取state里的內容獲取的數據// 只能讀取不可修改getters: {getPerson(state){return state.person}},//  3、定義對state的各種操作// why不直接實現在mutation里需要寫到action里?// mtations不能執行異步操作。aq:從云端獲取信息-->(等待云端反饋)更新到state異步操作// 因此說:對于異步操作需要放到action里，簡單的直接賦值操作可以直接放到mutation里mutations: {updataPerson(state, pserson) {state.person.name = pserson.name;}},// 3、定義對state的各種操作// actions無法直接修改state，需要在mutations里更新// mutation不支持異步，所以需要在action里寫api到urlactions: {// 比說action定義了更新state的操作// 但是不可對其直接修改// 所有的修改操作必須放到mutations里},// state中信息過長時// 用來將state進行分割modules: {}
})

????????注意：在這一步可能會遇到如下提示，這是一個識別錯誤的問題。

????????解決方法也很簡單，我們去在 src 目錄下面 vite-env.d.ts 文件添加如下配置，這時候就會發現這個錯誤沒有了。

declare module "vuex" {export * from "vuex/types/index.d.ts";export * from "vuex/types/helpers.d.ts";export * from "vuex/types/logger.d.ts";export * from "vuex/types/vue.d.ts";
}

3、在main.ts 中引用

? ? ? ? 這里就是沒有注釋掉的最下面兩行，是我們需要進行添加或者修改的。其余的代碼不用管，復制的時候請刪掉。

import { createApp } from 'vue'
// 下面這個是vue3自帶的樣式
// import './style.css'
import App from '@/App.vue'
import router from '@/router'
// 清除默認樣式
import './index.css'// 引入ElementPlus
import ElementPlus from 'element-plus' //全局引入
import 'element-plus/dist/index.css'// vuex的引入
import store from './store'// 引入 Echarts
// import echarts from 'echarts'// App.prototype.$echarts = echarts createApp(App).use(router).use(ElementPlus).use(store).mount('#app')

4、頁面引用?

// JS 部分
import store from '@/store/index.ts'let person1 = store.getters.getPerson    //從組件中獲取狀態(數據)person 方式一
let person2 = store.state.person      //從組件中獲取狀態(數據)person 方式二// HTML部分{{ person1 }}--{{ person2 }}

下面是運行的效果圖，可以看到我們定義在 vuex 里的數據已經成功渲染在了前端頁面上

三：尾記

? ? ? ? 以上就是 vuex 的一些基礎使用啦，當然本篇幅是面向小白的，因此寫的內容都是較為基礎的。后面我會去寫一篇 vuex 各個方法的深入講解。有興趣的小伙伴可以走個三連后面再來看哦~