15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 vue/vuex

uniapp 中使用vuex

李家霖| 发布于 2021-10-18 23:00:23| 877阅读| 3点赞| 0评论
举报

uniapp中每一个页面都可以向vuex中去增删改查 增加数据的灵活性


uniapp文件中创建一个js文件  在这个js文件中引入vuex         

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

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {        box:"数据",
    }, getters:{ getSelect(state){ return state.box } }, mutations: { setSelect(state,item){ state.box = item }, } }) export default store

vuex文件中的内容主要有三个  state  getters  mutations 

state  对应一个对象  这个对象中的数据将可以被任意的界面去访问和修改   

getters 这个对象中可以定义函数    页面就是通过getters中定义的方法去获取到vuex中的数据

mutations 这个对象中可以定义函数   页面可以通过该对象中的方法去设置vuex中的内容


使用vuex 需要在main.js中引入并添加到Vue的prototype原型中

import store from "./store/store.js"
Vue.prototype.$store = store



getters在界面中的使用   将会获取到vuex中state中的box属性

this.$store.getSelect();



mutations的使用   

this.$store.commit("setSelect",“新的数据”)

mutations的使用需要调用 commit方法  该方法接收两个参数  第一个是字符串   对应mutations中的方法名  表示调用mutations中的方法       第二个参数可以是任意的数据类型 第二个值将会作为参数传递进对应的调用方法;在对应的方法中获取到传递的数据后即可对state中的数据进行修改



 

3

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

李家霖
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部