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

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

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

前言：

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

具體步驟：

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、新建相關的文件夾與文件

這里配置多個不同vuex內部的js，使用vuex的modules來放不同的頁面，文件，然后統(tǒng)一使用一個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 內部根據(jù)不同的頁面來發(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,// 為每個模塊添加一個前綴名，保證模塊命明不沖突
  state,
  mutations,
  actions
}

user.js 也可以直接返回一個對象，寫法都可以

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

4、具體頁面使用

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中推出了一個插件(vuex-persistedstate)

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

1）安裝

pnpm i vuex-persistedstate -S

2）store/index.js

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

API

createPersistedState([options])使用給定的選項創(chuàng)建插件的新實例?？梢蕴峁┮韵逻x項來配置您的特定需求的插件：

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

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

您可能感興趣的文章: