vuex.4 基本使用总结 |
您所在的位置：网站首页 › vuex4教程 › vuex.4 基本使用总结 |
vuex.4 基本使用总结
|
「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」 Vuex是一个专为 Vue.js 应用程序开发的状态管理模式，vue3对应的vuex版本是v4.x。今天我们来看下，vuex4在vue3中的使用方法。 一、安装vuex指定vuex@next默认安装最新版的vuex npm install vuex@next --save yarn add vuex@next --save 复制代码 二、什么是storestore可以理解为一个对象，包含state、mutations、actions、getters四个字段， state：是一个函数，返回值包含了应用层级的状态 getters：是一个对象，getter可以理解为store的计算属性，它根据state派生出一些状态 mutations：是一个对象，里面定义了改变状态的方法，通过提交commit触发mutation改变状态 actions: 是一个对象，里面可以包含异步操作，通过dispatch触发action，action不能直接更改状态，也是通过提交commit触发mutation const moduleA = { state: () => ({ count: 1 }), getters: { doubleCount: (state) => { return state.count*2 } }, mutations: { increment (state) { // 变更状态 state.count++ } }, actions: { //3秒之后变更状态 incrementSync (context) { // 通过commit提交改变状态 setTimeout(context.commit('increment'), 3000) } }, } 复制代码store可以理解为全局对象，但和全局对象又有如下区别 store中存储的状态是响应式的，store中的状态发生变化时，引用这些状态的组件也会得到更新。 不能直接修改store中的状态，只能通过提交commit改变store中的状态上面创建的moduleA对象，还只是一个普通对象，还不是真正的store。我们需要使用vuex提供的createStore方法创建出storestore = createStore(moduleA)，并通过app.use函数，将store安装到app中。此时我们就可以通过store.state获取状态，通过store.commit方法触发状态变更。 import { createApp } from 'vue' import { createStore } from 'vuex' const store = createStore(moduleA) const app = createApp({ /* 根组件 */ }) // 将 store 实例作为插件安装 app.use(store) 复制代码 四、使用storevuex提供了组合式API，可以通过useStore函数，来在 setup 钩子函数中访问 store 访问state和getter，需要创建computed应用保留住响应性。 要使用 mutation 和 action 时，只需要在 setup 钩子函数中调用 commit 和 dispatch 函数。 import { useStore } from 'vuex' export default { setup () { const store = useStore() return { // 访问state count: computed(() => store.state.count) // 访问getter double: computed(() => store.getters.doubleCount) // 使用 mutation increment: () => store.commit('increment'), // 使用 action asyncIncrement: () => store.dispatch('asyncIncrement') } } } 复制代码 四、项目结构对于大型的应用，可以将vuex中的store分模块管理，下面是项目结构示例 └── store ├── index.js # 我们组装模块并导出 store 的地方 ├── actions.js # 根级别的 action ├── mutations.js # 根级别的 mutation └── modules ├── cart.js # 购物车模块 └── products.js # 产品模块 复制代码每个模块分别定义，state, getters, actions, mutaions，并将其导出，为了解决不同模块命名冲突的问题，将不同模块的namespaced:true，在组件中读取/变更模块的状态时，需要加上所属的模块名。 // index.js，在根模块引入子模块 import cart from './modules/cart' export default createStore({ modules: { cart } }) 复制代码 //cart.js，定义模块级别的`state, getters, actions, mutaions`，并将其导出 const state = {...} const getters = {...} const actions = {...} const mutations = {...} export default { namespaced: true,//解决不同模块命名冲突的问题 state, getters, actions, mutations } 复制代码 // 在组件中使用，需要加上所属的模块名。 export default { setup () { const store = useStore() const checkoutStatus = computed(() => store.state.cart.checkoutStatus) const products = computed(() => store.getters['cart/cartProducts']) const checkout = (products) => store.dispatch('cart/checkout', products) return { checkoutStatus, products, checkout } } } 复制代码 总结本文介绍了vuex4的安装，store的概念，store的创建和使用，以及使用vuex的项目组织结构。 |
【本文地址】