vuex在vite&vue3中的簡(jiǎn)單使用說(shuō)明

更新時(shí)間：2022年06月29日 09:58:04 作者：小小前端_可笑可笑

這篇文章主要介紹了vuex在vite&vue3中的簡(jiǎn)單使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vuex在vite&vue3的使用

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

一、說(shuō)明

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

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

二、使用

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

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

store目錄

2.安裝vuex

npm install vuex@next --save

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

vuex版本錯(cuò)誤

3.配置vuex

這里配置有很多方法，可以通過(guò)自己的業(yè)務(wù)邏輯來(lái)設(shè)置

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è)務(wù)邏輯來(lái)定義的一個(gè)狀態(tài)值
setName為我們?cè)陧?yè)面中調(diào)用的一個(gè)操作函數(shù)名稱
mutations中的函數(shù)為變更狀態(tài)的邏輯

4.頁(yè)面中使用vuex

<script setup>
import { ref, computed } from 'vue'
import $store from '@/store/index'
// 通過(guò)store中的name值來(lái)獲取計(jì)算屬性
const name = computed(() => $store.state.name)
const count = ref(0)
const handleVuex = async () => {
? count.value += 1
? // 向store中提交新的值，調(diào)用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

對(duì)于初學(xué)者來(lái)說(shuō)，vuex可能是一個(gè)進(jìn)階的使用，但是通過(guò)本文，我相信會(huì)改變你的想法

我只提供了vuex的一種使用方式，但是大同小異，大家學(xué)著使用起來(lái)吧

vue3.x之vite初體驗(yàn)

vite 使用

一、項(xiàng)目搭建

<project-name>為項(xiàng)目名
$ npm init vite-app <project-name>
$ cd <project-name> ?//進(jìn)入項(xiàng)目目錄
$ npm install ?//安裝項(xiàng)目所需依賴
$ npm run dev ?//啟動(dòng)項(xiàng)目