How to use vuex in vue3+vite-Vue.js-php.cn

How to use vuex in vue3+vite

WBOY

Release： 2023-06-03 09:10:07

forward

1086 people have browsed it

具体步骤：

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

pnpm i vuex -S

Copy after login

2、main.js中配置

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

Copy after login

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

How to use vuex in vue3+vite

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

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

Copy after login

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

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

Copy after login

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

const state = {
  sidebar: &#39;123&#39;
}
 
const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar = &#39;2222&#39;
   
  },
 
const actions = {
  toggleSideBar({ commit }) {
    commit(&#39;TOGGLE_SIDEBAR&#39;)
  }
}
 
export default {
  namespaced: true,// 为每个模块添加一个前缀名，保证模块命明不冲突
  state,
  mutations,
  actions
}

Copy after login

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

export default {
  state: {
    token: &#39;123&#39;
  },
 
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
  },
 
  actions: {
  }
}

Copy after login

4、具体页面使用

1）引入

import { useStore } from &#39;vuex&#39;

Copy after login

2）具体使用

setup(){
    const store = useStore()
}

Copy after login

How to use vuex in vue3+vite

3）使用 mutations里面的方法

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

Copy after login

4）使用actions里面的方法

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

Copy after login

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

1）安装

pnpm i vuex-persistedstate -S

Copy after login

2）store/index.js

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

Copy after login

API

创建一个新的插件实例，使用提供的选项来生成持久化状态。可以提供以下选项来配置您的特定需求的插件：

key ：存储持久状态的键。（默认：vuex）
paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）
reducer ：一个函数，将被调用来基于给定的路径持久化的状态。默认包含这些值。
subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)
storage ：而不是（或与）getState和setState。默认为localStorage。
getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。
setState ：将被调用来保持给定状态的函数。默认使用storage。
filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true

The above is the detailed content of How to use vuex in vue3+vite. For more information, please follow other related articles on the PHP Chinese website!