vue3+vite中如何使用vuex

本篇内容主要讲解“vue3+vite中如何使用vuex”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue3+vite中如何使用vuex”吧!

具体步骤：

1、安装vuex( vue3建议 4.0+ )

pnpmivuex-S

2、main.js中配置

importstorefrom'@/store'//hx-app的全局配置constapp=createApp(App)app.use(store)

3、新建相关的文件夹与文件，这里配置多个不同vuex内部的js，使用vuex的modules来放不同的页面，文件，然后统一使用一个getters.js

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

importgettersfrom'./getters'import{createStore}from'vuex'constmodulesFiles=import.meta.glob('./modules/*.js',{eager:true});//异步方式letmodules={}for(const[key,value]ofObject.entries(modulesFiles)){varmoduleName=key.replace(/^\.\/(.*)\.\w+$/,'$1');constname=moduleName.split('/')[1]modules[name]=value.default}conststore=createStore({modules,getters})exportdefaultstore

getters.js 内部根据不同的页面来发送不同的state数据

constgetters={sidebar:state=>state.app.sidebar,token:state=>state.user.token,}exportdefaultgetters

app.js 可以定义不同的变量，然后统一 export default

conststate={sidebar:'123'}constmutations={TOGGLE_SIDEBAR:state=>{state.sidebar='2222'},constactions={toggleSideBar({&nbspmit}){&nbspmit('TOGGLE_SIDEBAR')}}exportdefault{namespaced:true,//为每个模块添加一个前缀名，保证模块命明不冲突state,mutations,actions}

user.js 也可以直接返回一个对象，写法都可以

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

4、具体页面使用

1）引入

import{useStore}from'vuex'

2）具体使用

setup(){conststore=useStore()}

3）使用 mutations里面的方法

storemit("app/TOGGLE_SIDEBAR",1)

4）使用actions里面的方法

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

5、vuex中推出了一个插件(vuex-persistedstate)，可以解决刷新数据无保存的问题, 可以把数据除了vuex以外，在本地和会话（都支持）储存下

1）安装

pnpmivuex-persistedstate-S

2）store/index.js

importcreatePersistedstatefrom'vuex-persistedstate'//第一步导入import{createStore}from'vuex'conststore=createStore({modules,getters,//第二步是加这段代码,默认是存到了localStorage中plugins:[createPersistedstate({key:'vuex-local',//存储持久状态的键。（默认：vuex）paths:['user'],//部分持续状态的任何路径的数组。如果不加，默认所有。//storage:window.sessionStorage//默认存储到localStorage,想要存储到sessionStorage})]})

API

createPersistedState([options])使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：

• key ：存储持久状态的键。（默认：vuex）

• paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）

• reducer ：一个函数，将被调用来基于给定的路径持久化的状态。默认包含这些值。

• subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)

• storage ：而不是（或与）getState和setState。默认为localStorage。

• getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。

• setState ：将被调用来保持给定状态的函数。默认使用storage。

• filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true

到此，相信大家对“vue3+vite中如何使用vuex”有了更深的了解，不妨来实际操作一番吧！这里是主机评测网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

上一篇：vue3中如何使用JSX

下一篇：Golang中怎么读写Channel数据

---