10年匠心专业提供互联网设计开发方案

原创设计 定制开发

满足您的个性化需求

uniapp 中使用vuex

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

点击预览效果|uniapp 中使用vuex,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中的数据进行修改



 

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。

2. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。

3. 如果素材损害你的权益请联系客服vx:13230981129给予处理。

热门标签

李家霖
微信扫一扫立即咨询
公众号
在线客服
在线联系
17330196230 13230981129 18830906230
顶部
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号