使用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>
显示如图
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步