欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vuex在vite&vue3中的簡單使用說明

 更新時間：2022年06月29日 09:58:04   作者：小小前端_可笑可笑  
這篇文章主要介紹了vuex在vite&vue3中的簡單使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vuex在vite&vue3的使用

注：本文只講解vite打包vue3中vuex使用

一、說明

最近vite十分火爆，在構建項目過程中，想要用到vuex，但是在晚上搜索教程過程中，發(fā)現(xiàn)大都為vue2以下或者非vite版本的使用。

在這里總結一下vite打包中vue3下使用vuex的使用方式以及遇到的一些坑。

二、使用

1.創(chuàng)建項目（通過vite命令創(chuàng)建）

項目創(chuàng)建好之后在src創(chuàng)建store文件夾 

store目錄

2.安裝vuex

npm install vuex@next --save

這里注意，vite打包的項目中使用vuex需要添加@next，否則將不能使用createStore方法，如果遇到以下錯誤，可檢查vuex版本（"vuex": "^4.x"即為正確）

vuex版本錯誤

3.配置vuex

這里配置有很多方法，可以通過自己的業(yè)務邏輯來設置

import { createStore } from 'vuex'
export default createStore({
  state: {
    name: 'default'
  },
  mutations: {
    name: (state, newValue) => {
      state.name = newValue
    }
  },
  actions: {
    setName: (ctx, value) => {
      ctx.commit('name', value)
    }
  }
})
  • name為我們根據(jù)業(yè)務邏輯來定義的一個狀態(tài)值
  • setName為我們在頁面中調用的一個操作函數(shù)名稱
  • mutations中的函數(shù)為變更狀態(tài)的邏輯

4.頁面中使用vuex

<script setup>
import { ref, computed } from 'vue'
import $store from '@/store/index'
// 通過store中的name值來獲取計算屬性
const name = computed(() => $store.state.name)
const count = ref(0)
const handleVuex = async () => {
? count.value += 1
? // 向store中提交新的值，調用action中的setName函數(shù)
? await $store.dispatch('setName', 'new-value' + count.value)
}
</script>
<template>
? <div>
?? ?<p>{{ name }}</p>
?? ?<button type="button" @click="handleVuex">vuex</button>
? </div>
</template>

效果

use

對于初學者來說，vuex可能是一個進階的使用，但是通過本文，我相信會改變你的想法

我只提供了vuex的一種使用方式，但是大同小異，大家學著使用起來吧

vue3.x之vite初體驗

vite 使用

一、項目搭建

<project-name>為項目名
$ npm init vite-app <project-name>
$ cd <project-name> ?//進入項目目錄
$ npm install ?//安裝項目所需依賴
$ npm run dev ?//啟動項目

二、附項目結構

Vite項目結構

三、附項目啟動成功圖

vue3

Vite啟動極快，體驗很好，與vue CLI相比目錄結構變化不大，使用vue CLI的同學很快就能上手。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論