uni-app store 状态管理学习，多写几遍就会了

uni-app使用了一段时间了，一直没有用到store 状态管理，还是应该学习一下，以后会用到的

1.使用hbuiderx创建uni-app项目

2.与static同级创建store文件夹，store文件夹下创建index.js

3.关键index.js

(1) 引入Vue 和 Vuex
import 'Vue' from 'vue'
import 'Vuex' from 'vuex'
(2) 使用Vuex
Vue.use(Vuex)
(3) 创建store 对象 const store = new Vuex.Store({//state中是需要管理的全局变量state:{userName:'',hasLogin:false},//mutations 是操作state中变量的方法mutations:{login(state,name){  //登录成功修改 全局变量state.userName= name;state.hasLogin= true;},loginOut(state){     //退出登录修改 全局变量state.userName= '';state.hasLogin= false;}}})

(4) 导出store

export default store

4.这样简单的store模块就写完了，接下来是引用

首先在main.js中注册Vuex

import 'store' from './store'
Vue.prototype.$store = store
const app = new Vue({store,...App
})

5.在页面中使用 login.vue页面中使用，要使用store首先在页面script中引用

import {mapState,mapMutations} from 'vuex'

与vue的data同级的computed 生命周期中使用注册变量

computed:{...mapState(['userName'，'hasLogin'])
}

页面渲染直接{{userName}}或者this.hasLogin使用变量

然后mothods中

mothods:{...mapMutations(['login','loginOut']),
}

使用方法直接
this.login()
6.store 状态初始化 store 下的 index.js中

1.state

state:{num:0
}

2.actions

actions：{init(){this.commit('initNum',100)}}

3.mutations

mutations:{initNum(state,num){state.num = num}
}

4.在页面中调用actions的init方法

this.$store.dispatch('init')

今天看了在知乎上看了一篇文章，《学霸的努力程度到底可以有多可怕？》可以搜索看看，当年高中没好好学习，真的后悔

uni-app store 状态管理学习，多写几遍就会了相关推荐

App Store 状态列表
2019独角兽企业重金招聘Python工程师标准>>> Waiting for Upload (Yellow) Appears when you've completed ente ...
给未来写封信app服务器维护中,‎App Store 上的“给未来写封信”
『给未来写封信』超千万下载的互联网写信品牌挑一个风和日暖的周末午后,窝在沙发上给未来,写封信~ 给自己写信就是一个与自己独处的过程,去看看内心的他在逃避什么,害怕什么,会因为什么而快乐,又在 ...
英语记忆软件测试大乐,‎App Store 上的“学习土耳其词汇 - 学英语法游戏单词汇记忆卡片小测试练习”...
"土耳其练习游戏和词汇表学习单词你想学习和提高你的词汇量土耳其?那么这个程序是为你的学习,你没有时间去参加土耳其班或语言课程学习土耳其新languages.If,以"学习土耳 ...
苹果 App Store 申请和管理相关知识
本文转载至 http://blog.csdn.net/yu0089/article/details/8027669 app store为开发者提供四种类型的申请: 个人ios开发者计划$99/年公司 ...
教你写一个 React 状态管理库
自从 React Hooks 推行后,Redux 作为状态管理方案就显得格格不入了.Dan Abramov 很早就提到过 "You might not need Redux",开发 ...
苹果App Store申请和管理
app store为开发者提供四种类型的申请: 个人ios开发者计划$99/年公司ios开发者计划$99/年企业ios开发者计划$299/年高校ios开发者计划免费在这里主要介绍一下公司ios ...
Vue开发实例（14）之Vue状态管理store
引言 Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,如果你是打算学习Vue的开发流程,那么来吧,明哥带你快速上手.带你飞! 即使你并非前端开发人员,对前端的开发流程进行一定的了 ...
Pinia全新一代状态管理工具Pinia-Vue3全家桶
自2022年2月7日前端Vue3成为默认版后,Vuex的状态管理地位受收到了Pinia 的挑战.我相信当你使用过Pinia之后,就会果断的抛弃Vuex的.因为Pinia确实太方便和简单了. 学习目标 ...
App Store 新定价机制 - 2023年最全版
作者:iHTCboy 本文介绍了苹果 App Store 的新定价机制,是 App Store 在 15 周年之际推出的最重要价格升级. 文章通过"为什么,是什么,怎么办"的方法论 ...

uni-app store 状态管理学习，多写几遍就会了

uni-app store 状态管理学习，多写几遍就会了相关推荐

最新文章

热门文章