uni-app中使用vuex

已于 2024-04-17 10:37:00 修改
阅读量2.3k 收藏 27
点赞数 27
分类专栏： vue uni-app 文章标签： uni-app vue.js
于 2024-04-16 17:34:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oracle475/article/details/137819917
版权
uni-app 同时被 2 个专栏收录
15 篇文章 0 订阅
订阅专栏
vue
3 篇文章 0 订阅
订阅专栏
本文详细介绍了在Vue.js项目中如何使用Vuex进行状态管理，包括state的基本配置、getter的注册与获取、mutation的提交与action的分发，以及模块化的状态管理。通过实例和简表，帮助开发者理解和实践Vuex在uni-app中的应用。
摘要由CSDN通过智能技术生成

文档

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

大纲

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

目录

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

State

配置

  • 步骤
  1. 在 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

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

  1. 在 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）通过属性访问
  • 步骤
  1. 在根节点注入store
import store from '@/store/index.js'
  1. 获取state
store.state.节点state的属性名

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

（2）通过 this.$store 访问
this.$store.state.节点state的属性名

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

（3）通过 mapState 辅助函数访问
  • 步骤
  1. 引入mapState
import { mapState } from 'vuex'
  1. 在计算属性（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）通过属性访问
  • 步骤
  1. 在根节点注入store
import store from '@/store/index.js'
  1. 获取getters
store.getters.节点getters的属性名

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

（2）通过 this.$store 访问
this.$store.getters.节点getters的属性名

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

（3）通过 mapGetters 辅助函数访问
  • 步骤
  1. 引入mapGetters
import { mapGetters } from 'vuex'
  1. 在计算属性（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
  • 步骤
  1. 在根节点注入store
import store from '@/store/index.js'
  1. 调用 store.commit 方法
store.commit('mutation的事件名')

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

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

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

（2）通过 this.$store.commit(‘xxx’) 提交mutation
this.$store.commit('mutation的事件名')

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

  • 传入参数
this.$store.commit('mutation的事件名', 参数)
（3）通过 mapMutations 辅助函数提交
  • 步骤
  1. 引入mapMutations
import { mapMutations } from 'vuex'
  1. 使用 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 方法触发
  • 步骤
  1. 在根节点注入store
import store from '@/store/index.js'
  1. 分发action
store.dispatch('actions节点的方法名')

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

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

在这里插入图片描述

（2）通过 this.$store.dispatch(‘xxx’) 分发action
this.$store.dispatch('actions节点的方法名')

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

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

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

（3）通过 mapActions 辅助函数分发
  • 步骤
  1. 引入mapActions
import { mapActions } from 'vuex'
  1. 使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用
methods: {
	...mapActions(['actions节点的方法名1', 'actions节点的方法名2', ...])
}

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

  • 传入参数
    示例：
    在这里插入图片描述

状态管理 （module）

文档

链接：Vuex•核心概念•Module

配置

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

  • 步骤

  1. 在 store 文件夹下新建 modules 文件夹，并在下面新建 xxx.js 文件等用来存放 vuex 的模块
    在这里插入图片描述

  2. 在 main.js 文件中引入 store
    在这里插入图片描述

  3. 在 store 文件夹下面新建 index.js 文件，作为模块入口，引入各子模块
    在这里插入图片描述
    在这里插入图片描述

  4. 子模块的页面内容

export default {
  state:{

  },
  mutations: {

  },
  actions: {

  },
  getters: {}
}

命名空间

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

namespaced: true

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

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

在这里插入图片描述

getters

  1. 可以在store文件夹下单独定义js文件（getters.js），管理状态
    在这里插入图片描述

  2. getters.js 文件的内容

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

export default getters

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

  1. 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
stategettermutationaction
作用存储状态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
modulestategettermutationaction
作用存储状态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节点的方法名’])
传入参数调用方法，传入参数调用方法，传入参数
云海洋和天
关注
专栏目录
uniapp中vuex的应用
qq_51741194的博客
05-03 8241
前言 提示：这里可以添加本文要记录的大概内容： 记录一下今日学习应用uniapp中的vuex 提示：以下是本篇文章正文内容，下面案例可供参考 一、vuex是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 按照自己理解来说就是公共数据管理模块。如果应用中数据量比较大的可以应用，不是很大的建议用缓存即可。 二、使用步骤 使用准备在项目中新建store目录，在该目录下新建index.js文件 1
vuex 在 uniapp vue2 和 vue3 中的使用（纯代码）
最新发布
奋进的小羊的博客
09-02 724
这个页面是需要在项目根目录下自己新建一个store文件夹，然后在自己新增一个index.js文件的。这个页面是需要在项目根目录下自己新建一个store文件夹，然后在自己新增一个index.js文件的。index.vue页面。index.vue页面。index.js页面。index.js页面。
Uniapp中vuex的使用
专注微信小程序
08-27 4680
vuex的学习笔记，很多地方还都不是很懂，先记下来再说，比小程序里自带的store复杂很多，看着头大，而且方法里面很多ES6的内容，头都看到爆炸。
uni-app vuex得使用
weixin_62312817的博客
06-20 3378
vue是单向数据流，子组件不能直接修改父组件的数据，而通过vuex状态管理实现：把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！
uniapp中使用vuex
qq_30351747的博客
02-20 1238
uniapp中使用vuex
uni-app+uview+vuex+分包环境搭建
03-07
3. 创建uni-app项目：在HBuilderX中选择uni-app模板，初始化项目结构。 4. 集成uView UI：通过npm安装uView，然后在main.js中引入并配置。 5. 集成Vuex：同样通过npm安装Vuex，然后在项目中创建store目录，编写state...
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
10-16
1. uni-app：一个使用 Vue.js 开发所有前端应用的框架，能够编译到iOS、Android、H5、以及各种小程序等多个平台。 2. 微信小程序登录：指的是使用微信账号体系，通过微信授权的方式进行用户身份验证和登录。 3. vuex...
uni-app/vue, vuex刷新后数据消失
weixin_45753961的博客
03-08 4316
在默认模式下,vuex中保存的东西会在刷新之后被清空,导致我们想用vuex存储一些内容，刷新后无法获取。 可以利用持久性的存储比如localStorage或setStorageSync在app.vue监听刷新事件进行存储，设置延迟清空存储，避免内存泄露。 1.vue 利用localStorage的持久性存储结合vuex， 在app.vue的created //在页面刷新时将vuex里的信息保存到localStorage里 window.addEventListener("beforeunload", ()
uniapp 中 vuex 的使用
热门推荐
很酷的站长的博客
12-03 1万+
/ 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。
uni-app如何使用vuex（vue2—详）
a895544608的博客
05-03 3083
二、mutations （更新数据，state中的数据只能使用mutations去改变数据—以上完————编写博客时意外点了撤回 差点功夫白费，幸好自带历史回退。一、state （管理组件数据，管理的数据是响应式的）——————————————————以上引入完成。——————————————————以下使用方法。this.$store.getters.属性名。this.$store.getters.属性名。，getters辅助函数也可调用——方法在四。this.$store.state.属性名。
uniApp 使用vuex
qq_41954585的博客
11-08 829
这里需要在mutations中定义修改的方法，如上setHasLogin。1、根目录创建store目录，创建index.js文件；2、在mian.js 中挂载store。3.3 调用actions中的方法。这里需要在actions中定义方法。3.4 调用getters中的方法。这里需要在getters中定义方法。3、uniapp中使用vuex。3.1 获取state中的值。3.2 修改state中的值。
【教程】在uni-app上使用vuex
weixin_39342847的博客
10-14 1743
安装 uni-app中内置了vuex，因此我们不需要任何的安装操作，即可直接使用。 路径 我推荐在根目录上创建store.js，当然你要是想创建在其他目录下，比如放置在store文件夹的index.js目录也是可以的，在main.js中引用记得写好相应的路径就行。 像这样 store.js 就像在普通的vue项目中使用vuex一样，在uni-app环境中使用vuex也需要以下几个步骤 引入vue和vuex import Vue from "vue" import Vuex from "vuex" Vue.
uniapp 使用vuex
weixin_38923162的博客
06-24 1280
它是 uni-app 中常用的状态管理工具，可以将应用程序中的各种数据（如用户信息、全局配置等）进行集中管理和维护，从而方便数据的统一调度和管理。2.创建 store：在 src 目录下创建一个名为 store 的文件夹，在其中创建一个名为 index.js 的文件，用于定义和导出 vuex 的实例对象。3.在 main.js 中注册 store：在 main.js 文件中，引入 store 并注册到 uni-app 中。4.在组件中使用 store：在需要使用 store 的组件中，通过 this.
在uniapp中使用vuex
WeiflR10的博客
09-16 1176
1.在根目录下新建一个store文件夹 ，然后创建js文件 index.js。
uniapp集成vuex
Cloud的专栏
07-26 652
本篇文章用最简单的方式讲解uniapp中vuex的使用。
uni-app怎么实现vuex的持久化
05-19
在uni-app中，可以使用uni-storage插件来实现Vuex的持久化。具体步骤如下： 1. 在项目中安装uni-storage插件：`npm install --save uni-storage` 2. 在Vuex的store中引入uni-storage插件 ``` import storage from 'uni-storage' const store = new Vuex.Store({ state: { ... }, mutations: { ... }, plugins: [ storage({ key: 'vuex', // 存储的key值 paths: ['state'], // 需要持久化的state值 }) ] }) ``` 3. 在需要使用持久化数据的地方，可以使用`uni.getStorageSync('vuex')`来获取持久化数据 ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, plugins: [ storage({ key: 'vuex', paths: ['count'] }) ] }) // 在需要获取持久化数据的地方，可以使用如下方式 const count = uni.getStorageSync('vuex').count ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值