vue3+vite中如何使用vuex

发布时间:2022-11-28 09:28:43 作者:iii
来源:亿速云 阅读:136

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

具体步骤:

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来放不同的页面,文件,然后统一使用一个getters.js

vue3+vite中如何使用vuex

 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 内部根据不同的页面来发送不同的state数据

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

app.js   可以定义不同的变量,然后统一   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()
}

vue3+vite中如何使用vuex

3)使用  mutations里面的方法

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

4)使用actions里面的方法

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

5、vuex中推出了一个插件(vuex-persistedstate),可以解决刷新数据无保存的问题, 可以把数据除了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', //存储持久状态的键。(默认:vuex)
      paths: ['user'], //部分持续状态的任何路径的数组。如果不加,默认所有。
      // storage: window.sessionStorage //默认存储到localStorage,想要存储到sessionStorage
    })
  ]
})

API

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

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

推荐阅读:
  1. 如何使用VueX模块
  2. 如何使用Vuex中的Mutations

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue3 vite vuex

上一篇:React组件状态下移和内容提升怎么实现

下一篇:怎么将Java与C#时间进行互相转换

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》