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

2022-06-29 14:02:44

vuex在vite&vue3的使用

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

一、說明

最近vite十分火爆，在構建專案過程中，想要用到vuex，但是在晚上搜尋教學過程中，發現大都為vue2以下或者非vite版本的使用。

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

二、使用

1.建立專案（通過vite命令建立）

專案建立好之後在src建立store資料夾

2.安裝vuex

npm install vuex@next --save

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

3.設定vuex

這裡設定有很多方法，可以通過自己的業務邏輯來設定

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為我們根據業務邏輯來定義的一個狀態值
setName為我們在頁面中呼叫的一個操作函數名稱
mutations中的函數為變更狀態的邏輯

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函數
  await $store.dispatch('setName', 'new-value' + count.value)
}
</script>

<template>
  <div>
    <p>{{ name }}</p>
    <button type="button" @click="handleVuex">vuex</button>
  </div>
</template>

效果

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

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

vue3.x之vite初體驗

vite 使用

一、專案搭建

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

二、附專案結構

三、附專案啟動成功圖

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。