使用vite搭建vue3項目(六) 使用vuex進行狀態管理

vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式 + 庫。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

安裝

npm install vuex@next --save

直接使用

this.$store.state.xxx

首先在src目錄下創建store文件夾，在其下創建index.ts

import {createStore} from "vuex"

const store = createStore({
    state() {
        return {num: 1,}
    }
})

export default store

 修改main.ts 

import {createApp} from 'vue'
import router from './router/index'
import store from './store/index'   // 引入
import i18n from './locales/index'
import App from './App.vue'

createApp(App)
    .use(store)   // 使用
    .use(router)
    .use(i18n)
    .mount('#app')

修改App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>學校:{{getSchool('北京')}}</div>
  <div>學校:{{getSchool('天津')}}</div>
  <div>num:{{$store.state.num}}</div>
</template>

<script lang="ts">
import { defineComponent,ref} from "vue";
import { useStore } from 'vuex'


export default defineComponent({
  name: 'App',
  setup() {
    const store = useStore()
    let count = store.state.num;

    function getSchool(val: string) {
      count++
      store.state.num = count
      return val + '第' + count + '小學'
    }

    return {getSchool}
  }
})
</script>

顯示如圖