uni-app中使用vuex

原创 2024-04-17 10:37:00 3.4k 阅读 AI写同款

收录于

uni-app

vue

云海洋和天

码龄7年墨衍会员 · AI 创作全网分发

402粉丝43篇原创

关注

uniapp 中 vuex 的使用 / files.keys() 匹配到的文件// ['./common.js', './user.js']files.keys().forEach(key => { // files(key) 文件 export 出的数据 const data = files(key)});// this 是 vue 实例，所以，当挂载到 Vue 上时要注意 this 的指向this.$store.state// 挂载到 uni 上时获取 vuex 数据uni.$store.state。阅读详情

AI摘要

本文详细介绍了在Vue.js项目中如何使用Vuex进行状态管理，包括state的基本配置、getter的注册与获取、mutation的提交与action的分发，以及模块化的状态管理。通过实例和简表，帮助开发者理解和实践Vuex在uni-app中的应用。

文档

链接：uni-app官网•教程•vue语法•vue2•vuex

大纲

状态管理（state、getter、mutation、action）
状态管理（module）
简表

状态管理（state、getter、mutation、action）

State

配置

步骤

在 uni-app 项目根目录下，新建 store 目录，在此目录下新建 index.js 文件。在 index.js 文件配置如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    username:'foo',
		age:18
  },
  mutations: { },
  actions: { },
  getters: { }
})
export default store

示例：
在这里插入图片描述

在 main.js 中导入文件

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store

const app = new Vue({
  store,
  ...App
})
app.$mount()

示例：
在这里插入图片描述

获取state

（1）通过属性访问

步骤

在根节点注入store

import store from '@/store/index.js'

获取state

store.state.节点state的属性名

示例一：
在这里插入图片描述
示例二：

示例三：

（2）通过 this.$store 访问

this.$store.state.节点state的属性名

示例：
在这里插入图片描述

（3）通过 mapState 辅助函数访问

步骤

引入mapState

import { mapState } from 'vuex'

在计算属性（computed）中映射：

使用扩展运算符将对象传给computed属性；

给 mapState 传一个字符串数组。

（映射的计算属性的名称与 state 的子节点名称相同）

computed: {
	...mapState(['state节点的属性名1', 'state节点的属性名2', ...])
}

示例：
在这里插入图片描述

Getter

可以认为Getter是 store 的计算属性。

（就像 computed 计算属性一样，getter 返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算）

注册getters

步骤
在 uni-app 项目根目录下，store 目录下的 index.js 文件：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state:{
        obj: {
          username: '111',
          age: 100
        },
        address: '200'
	},
    getters: {
        obj: state => state.obj,
        address: state => state.address
    }
})
export default store

示例：
在这里插入图片描述

获取getters

（1）通过属性访问

步骤

在根节点注入store

import store from '@/store/index.js'

获取getters

store.getters.节点getters的属性名

示例一：
在这里插入图片描述

（2）通过 this.$store 访问

this.$store.getters.节点getters的属性名

示例：
在这里插入图片描述

（3）通过 mapGetters 辅助函数访问

步骤

引入mapGetters

import { mapGetters } from 'vuex'

在计算属性（computed）中映射：

使用扩展运算符将 getter 混入 computed 对象中

computed: {
	...mapGetters(['getters节点的属性名1', 'getters节点的属性名2', ...])
}

示例：
在这里插入图片描述

Mutation

mutations 里面装着改变数据的方法集合。

通过提交 mutation 的方式来改变状态数据。

每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。回调函数接受 state 作为第一个参数。

mutation 必须是同步函数。

注册mutation

在 uni-app 项目根目录下，store 目录下的 index.js 文件：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state:{
        count: 10
	},
    mutations: {
		add(state) {
			state.count += 2
		}
	}
})
export default store

在这里插入图片描述

提交mutation

（1）通过 store.commit 调用mutation

步骤

在根节点注入store

import store from '@/store/index.js'

调用 store.commit 方法

store.commit('mutation的事件名')

示例：
在这里插入图片描述

传入参数

store.commit('mutation的事件名', 参数)

示例：
在这里插入图片描述

（2）通过 this.$store.commit(‘xxx’) 提交mutation

this.$store.commit('mutation的事件名')

示例：
在这里插入图片描述

传入参数

this.$store.commit('mutation的事件名', 参数)

（3）通过 mapMutations 辅助函数提交

步骤

引入mapMutations

import { mapMutations } from 'vuex'

使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用

methods: {
	...mapMutations(['mutations节点的事件名1', 'mutations节点的事件名2', ...])
}

示例：
在这里插入图片描述

传入参数
示例：

Action

action 类似于 mutation ，不同在于：

action 提交的是 mutation，通过 mutation 来改变 state ，而不是直接变更状态。
action 可以包含任意异步操作。

注册action

action 函数接受一个context 对象（该context 对象与 store 实例具有相同方法和属性），因此可以调用 context.commit 提交一个 mutation。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
	state:{
        count: 10
	},
    mutations: {
		add(state) {
			state.count += 2
		}
	},
    actions: {
        addCountAction(context){
          context.commit('add')
        }
    }
})
export default store

示例：
在这里插入图片描述

分发action

（1）通过 store.dispatch 方法触发

步骤

在根节点注入store

import store from '@/store/index.js'

分发action

store.dispatch('actions节点的方法名')

示例：
在这里插入图片描述

传入参数

store.dispatch('actions节点的方法名', 参数)

在这里插入图片描述

（2）通过 this.$store.dispatch(‘xxx’) 分发action

this.$store.dispatch('actions节点的方法名')

示例：
在这里插入图片描述

传入参数

this.$store.dispatch('action节点的方法名', 参数)

示例：
在这里插入图片描述

（3）通过 mapActions 辅助函数分发

步骤

引入mapActions

import { mapActions } from 'vuex'

使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用

methods: {
	...mapActions(['actions节点的方法名1', 'actions节点的方法名2', ...])
}

示例：
在这里插入图片描述

传入参数
示例：

状态管理（module）

文档

链接：Vuex•核心概念•Module

配置

可以将 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter。

步骤

在 store 文件夹下新建 modules 文件夹，并在下面新建 xxx.js 文件等用来存放 vuex 的模块
在 main.js 文件中引入 store
在 store 文件夹下面新建 index.js 文件，作为模块入口，引入各子模块
子模块的页面内容

export default {
  state:{

  },
  mutations: {

  },
  actions: {

  },
  getters: {}
}

命名空间

如果希望模块具有更高的封装度，可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

namespaced: true

示例一：
在这里插入图片描述
示例二：
在mutations中调用mutation事件

this.commit('模块/mutation的事件名')

在这里插入图片描述

getters

可以在store文件夹下单独定义js文件（getters.js），管理状态
getters.js 文件的内容

const getters = {
     count: state => state.moduleA.count //示例
}

export default getters

示例：
在这里插入图片描述

store文件夹下的index.js文件中

获取state、提交mutation、分发action

获取state

store.state.moduleA // -> moduleA 的状态
store.state.moduleB // -> moduleB 的状态

（1）通过属性访问

import store from '@/store/index.js'

store.state.模块.节点state的属性名

（2）通过 this.$store 访问

this.$store.state.模块.节点state的属性名

（3）通过 mapState 辅助函数访问

import { mapState } from 'vuex'

computed: {
	...mapState('模块', ['state节点的属性名1', 'state节点的属性名2', ...])
}

示例：
在这里插入图片描述

提交mutation

（1）通过 store.commit 调用 mutation

import store from '@/store/index.js'

store.commit('模块/mutation的事件名')

示例：
在这里插入图片描述

传入参数

store.commit('模块/mutation的事件名', 参数)

示例：
在这里插入图片描述

（2）通过 this.$store.commit(‘xxx’) 提交 mutation

this.$store.commit('模块/mutation节点的事件名')

传入参数

this.$store.commit('模块/mutation节点的事件名', 参数)

（3）通过 mapMutations 辅助函数提交

import { mapMutations } from 'vuex'

methods: {
	...mapMutations('模块', ['mutation节点的事件名1', 'mutation节点的事件名2', ...])
}

传入参数
示例：

分发action

（1）通过 store.dispatch 方法触发

import store from '@/store/index.js';

store.dispatch('模块/actions节点的方法名')

传入参数

store.dispatch('模块/actions节点的方法名', 参数)

（2）通过 this.$store.dispatch(‘xxx’) 分发action

this.$store.dispatch('模块/actions节点的方法名')

传入参数

this.$store.dispatch('模块/actions节点的方法名', 参数)

（3）通过 mapActions 辅助函数分发

import { mapActions } from 'vuex'

methods: {
	...mapActions('模块', ['actions节点的方法名1', 'actions节点的方法名2', ...])
}

传入参数
示例：

createNamespacedHelpers

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations, mapActions } = createNamespacedHelpers('模块')
export default {
	computed: {
		...mapState(['state节点的属性名1', 'state节点的属性名2', ...])
	},
	methods: {
		...mapMutations(['mutations节点的事件名1', 'mutations节点的事件名2', ...]),
		...mapActions(['actions节点的方法名1', 'actions节点的方法名2', ...])
	}
}
</script>

示例：
在这里插入图片描述

简表

state、getter、mutation、action

	state	getter	mutation	action
作用	存储状态	store的计算属性	变更状态	提交mutation
定义		计算属性名: state => state.属性名	函数名(state, payload) {state.属性名 = payload}	函数名(context){context.commit(‘事件名’)}
获取/调用方法一（先注入store：import store from ‘@/store/index.js’）	store.state.节点state的属性名	store.getters.节点getters的属性名	store.commit(‘mutation的事件名’)	store.dispatch(‘actions节点的方法名’)
传入参数			store.commit(‘mutation的事件名’, 参数)	store.dispatch(‘actions节点的方法名’, 参数)
获取/调用方法二	this.$store.state.节点state的属性名	this.$store.getters.节点getters的属性名	this.$store.commit(‘mutation的事件名’)	this.$store.dispatch(‘actions节点的方法名’)
传入参数			this.$store.commit(‘mutation的事件名’, 参数)	this.$store.dispatch(‘actions节点的方法名’, 参数)
获取/调用方法三	①import { mapState } from 'vuex’②…mapState([‘state节点的属性名’])	①import { mapGetters } from 'vuex’②…mapGetters([‘getters节点的属性名’])	①import { mapMutations } from 'vuex’②…mapMutations([‘mutations节点的事件名’])	①import { mapActions } from 'vuex’②…mapActions([‘actions节点的方法名’])
传入参数			调用方法，传入参数	调用方法，传入参数

module

module	state	getter	mutation	action
作用	存储状态	store的计算属性	变更状态	提交mutation
定义		计算属性名: state => state.属性名	函数名(state, payload) {state.属性名 = payload}	函数名(context){context.commit(‘事件名’)}
获取/调用方法一（先注入store：import store from ‘@/store/index.js’）	store.state.模块.节点state的属性名	store.getters.模块.节点getters的属性名	store.commit(‘模块/mutation的事件名’)	store.dispatch(‘模块/actions节点的方法名’)
传入参数			store.commit(‘模块/mutation的事件名’, 参数)	store.dispatch(‘模块/actions节点的方法名’, 参数)
获取/调用方法二	this.$store.state.模块.节点state的属性名	this.$store.getters.模块.节点getters的属性名	this.$store.commit(‘模块/mutation的事件名’)	this.$store.dispatch(‘模块/actions节点的方法名’)
传入参数			this.$store.commit(‘模块/mutation的事件名’, 参数)	this.$store.dispatch(‘模块/actions节点的方法名’, 参数)
获取/调用方法三	①import { mapState } from 'vuex’②…mapState(‘模块’, [‘state节点的属性名’])	①import { mapGetters } from 'vuex’②…mapGetters(‘模块’, [‘getters节点的属性名’])	①import { mapMutations } from 'vuex’②…mapMutations(‘模块’, [‘mutations节点的事件名’])	①import { mapActions } from 'vuex’②…mapActions(‘模块’, [‘actions节点的方法名’])
传入参数			调用方法，传入参数	调用方法，传入参数