vue3+vite中使用vuex的具體步驟

更新時(shí)間：2022年11月26日 15:36:47 作者：浩星

在vue3+vite創(chuàng)建的項(xiàng)目中使用vuex，要注意的是vite有部分寫(xiě)法和之前的webpack是不同的，這篇文章主要介紹了vue3+vite中使用vuex的具體步驟,需要的朋友可以參考下

前言：

在vue3+vite創(chuàng)建的項(xiàng)目中使用vuex，要注意的是vite有部分寫(xiě)法和之前的webpack是不同的，比如，他不支持 require，想把vue2的項(xiàng)目直接升級(jí)到vue3的時(shí)候，需要改很多地方，如果非要使用vite也可以，記得改相關(guān)的內(nèi)容。

具體步驟：

1、安裝vuex( vue3建議 4.0+ )

pnpm i vuex -S

2、main.js中配置

import store from '@/store'
// hx-app的全局配置
const app = createApp(App)
app.use(store)

3、新建相關(guān)的文件夾與文件

這里配置多個(gè)不同vuex內(nèi)部的js，使用vuex的modules來(lái)放不同的頁(yè)面，文件，然后統(tǒng)一使用一個(gè)getters.js

index.js 核心文件，這里使用了import.meta.glob，而不是require

import getters from './getters'
import { createStore } from 'vuex'
 
const modulesFiles = import.meta.glob('./modules/*.js',{ eager: true }); // 異步方式
 
let modules = {}
for (const [key, value] of Object.entries(modulesFiles)) {
  var moduleName = key.replace(/^\.\/(.*)\.\w+$/, '$1');
  const name = moduleName.split('/')[1]
  modules[name] = value.default
}
 
const store = createStore({
  modules,
  getters
})
 
export default store

getters.js 內(nèi)部根據(jù)不同的頁(yè)面來(lái)發(fā)送不同的state數(shù)據(jù)

const getters = {
  sidebar: state => state.app.sidebar,
  token: state => state.user.token,
}
 
export default getters

app.js 可以定義不同的變量，然后統(tǒng)一 export default

const state = {
  sidebar: '123'
}
 
const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar = '2222'
   
  },
 
const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  }
}
 
export default {
  namespaced: true,// 為每個(gè)模塊添加一個(gè)前綴名，保證模塊命明不沖突
  state,
  mutations,
  actions
}

user.js 也可以直接返回一個(gè)對(duì)象，寫(xiě)法都可以

export default {
  state: {
    token: '123'
  },
 
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
  },
 
  actions: {
  }
}

4、具體頁(yè)面使用

1）引入

import { useStore } from 'vuex'

2）具體使用

setup(){
    const store = useStore()
}

3）使用 mutations里面的方法

store.commit("app/TOGGLE_SIDEBAR", 1)

4）使用actions里面的方法

store.dispatch("app/asyncAddStoreCount", 2)

5、vuex中推出了一個(gè)插件(vuex-persistedstate)

可以解決刷新數(shù)據(jù)無(wú)保存的問(wèn)題, 可以把數(shù)據(jù)除了vuex以外，在本地和會(huì)話(huà)（都支持）儲(chǔ)存下

1）安裝

pnpm i vuex-persistedstate -S

2）store/index.js

import createPersistedstate from 'vuex-persistedstate' //第一步導(dǎo)入
import { createStore } from 'vuex'
const store = createStore({
  modules,
  getters,
  //第二步是加這段代碼,默認(rèn)是存到了localStorage中
  plugins: [
    createPersistedstate({
      key: 'vuex-local', //存儲(chǔ)持久狀態(tài)的鍵。（默認(rèn)：vuex）
      paths: ['user'], //部分持續(xù)狀態(tài)的任何路徑的數(shù)組。如果不加，默認(rèn)所有。
      // storage: window.sessionStorage //默認(rèn)存儲(chǔ)到localStorage,想要存儲(chǔ)到sessionStorage
    })
  ]
})

API

createPersistedState([options])使用給定的選項(xiàng)創(chuàng)建插件的新實(shí)例。可以提供以下選項(xiàng)來(lái)配置您的特定需求的插件：

key ：存儲(chǔ)持久狀態(tài)的鍵。（默認(rèn)：vuex）
paths ：部分持續(xù)狀態(tài)的任何路徑的數(shù)組。如果沒(méi)有路徑給出，完整的狀態(tài)是持久的。（默認(rèn)：[]）
reducer ：一個(gè)函數(shù)，將被調(diào)用來(lái)基于給定的路徑持久化的狀態(tài)。默認(rèn)包含這些值。
subscriber ：一個(gè)被調(diào)用來(lái)設(shè)置突變訂閱的函數(shù)。默認(rèn)為store => handler => store.subscribe(handler)
storage ：而不是（或與）getState和setState。默認(rèn)為localStorage。
getState ：將被調(diào)用以重新水化先前持久狀態(tài)的函數(shù)。默認(rèn)使用storage。
setState ：將被調(diào)用來(lái)保持給定狀態(tài)的函數(shù)。默認(rèn)使用storage。
filter ：將被調(diào)用來(lái)過(guò)濾將setState最終觸發(fā)存儲(chǔ)的任何突變的函數(shù)。默認(rèn)為() => true

到此這篇關(guān)于vue3+vite中使用vuex的文章就介紹到這了,更多相關(guān)vue3+vite使用vuex內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: