网站的html,网站切图,丹徒网站建设公司,网页设计总结经验如何在 Vue 3 中使用组合式 API 与 Vuex 进行状态管理的详细教程。
安装 Vuex
首先#xff0c;在你的 Vue 3 项目中安装 Vuex。可以使用 npm 或 yarn#xff1a;
npm install vuexnext --save
# or
yarn add vuexnext创建 Store
在 Vue 3 中#xff0c;你可以使用 creat…如何在 Vue 3 中使用组合式 API 与 Vuex 进行状态管理的详细教程。
安装 Vuex
首先在你的 Vue 3 项目中安装 Vuex。可以使用 npm 或 yarn
npm install vuexnext --save
# or
yarn add vuexnext创建 Store
在 Vue 3 中你可以使用 createStore 函数来创建 Vuex Store。通常我们会在项目的 src 目录下创建一个 store 文件夹并在其中创建一个 index.js 文件
// src/store/index.jsimport { createStore } from vuex;const store createStore({state() {return {count: 0};},mutations: {increment(state) {state.count;}},actions: {increment({ commit }) {commit(increment);}},getters: {doubleCount(state) {return state.count * 2;}}
});export default store;在 Vue 应用中使用 Store
在你的 Vue 应用中你需要将创建的 Store 实例传递给 Vue 应用。通常在 main.js 文件中进行
// src/main.jsimport { createApp } from vue;
import App from ./App.vue;
import store from ./store;const app createApp(App);app.use(store);app.mount(#app);使用 State
你可以在组合式 API 中通过 useStore 函数来访问 Vuex Store
templatedivp{{ count }}/p/div
/templatescript
import { computed } from vue;
import { useStore } from vuex;export default {setup() {const store useStore();const count computed(() store.state.count);return {count};}
};
/script使用 Getters
同样你可以在组合式 API 中使用 useStore 函数来访问 Vuex Getters
templatedivp{{ doubleCount }}/p/div
/templatescript
import { computed } from vue;
import { useStore } from vuex;export default {setup() {const store useStore();const doubleCount computed(() store.getters.doubleCount);return {doubleCount};}
};
/script提交 Mutations
你可以在组合式 API 中通过 useStore 函数来提交 Vuex Mutations
templatedivp{{ count }}/pbutton clickincrementIncrement/button/div
/templatescript
import { computed } from vue;
import { useStore } from vuex;export default {setup() {const store useStore();const count computed(() store.state.count);const increment () {store.commit(increment);};return {count,increment};}
};
/script分发 Actions
你可以在组合式 API 中通过 useStore 函数来分发 Vuex Actions
templatedivp{{ count }}/pbutton clickincrementIncrement/button/div
/templatescript
import { computed } from vue;
import { useStore } from vuex;export default {setup() {const store useStore();const count computed(() store.state.count);const increment () {store.dispatch(increment);};return {count,increment};}
};
/script模块化 Store
当应用变得非常复杂时可以将 store 分割成模块module。每个模块拥有自己的 state、mutation、action 和 getter甚至可以嵌套子模块
// src/store/index.jsimport { createStore } from vuex;const moduleA {state() {return {count: 0};},mutations: {increment(state) {state.count;}},actions: {increment({ commit }) {commit(increment);}},getters: {doubleCount(state) {return state.count * 2;}}
};const store createStore({modules: {a: moduleA}
});export default store;访问模块中的 State
在组合式 API 中你可以通过模块名来访问模块中的 state 和其他属性
templatedivp{{ count }}/p/div
/templatescript
import { computed } from vue;
import { useStore } from vuex;export default {setup() {const store useStore();const count computed(() store.state.a.count);return {count};}
};
/script
