使用vite搭建vue3项目(六)

本文主要是介绍使用vite搭建vue3项目(六)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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>num:{{$store.state.num}}</div>   <!-- 直接引用state  -->
  <div v-for="(item,index) in users">
    {{index+1}}-{{item}}
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import axios from "axios"

export default defineComponent({
  name: 'App',
  setup() {
    let users = ref([])

    onMounted(()=>{
      axios.get(`/api/getUsers`).then(res=>{
        users.value = res.data.data
        console.log('users', users)
      }).catch(err=>{
        console.log(err)
      })
    })

    return { users }
  }
})
</script>

显示如图

这篇关于使用vite搭建vue3项目(六)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！