uni-app 使用vuex(vuex module)

1:uni-app 集成了vuex 直接在根目录下创建store文件夹 新建store.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import ‘模块名称’ from ‘模块路径‘;

Vue.use(Vuex);

const $store = new Vuex.Store({
  modules: {
    ‘引入的模块名称’,
  }
});
export default $store;

2:在main.js中引入挂载store

import store  from ‘./store/store.js‘

Vue.prototype.$store = store

3:在store文件夹下新建文件 ‘模块名称’

新建:

actions.js

getters.js

index.js

mutations.js

state.js

types.js

4:在index.js中引入

import state from ‘./states‘;
import getters from ‘./getters‘;
import mutations from ‘./mutations‘;
import actions from ‘./actions‘;

export default {
  namespaced: true, //namespaced写成true,意思就是可以用这个module名作为区分了
  state,
  mutations,
  actions,
  getters
};

5:actions.js

import * as TYPES from ‘./types‘  //actions分发事件类型 
const actions = {
  changeNum(context){
    context.commit(TYPES.CHANGE_NUM)
  }
};
export default actions

6:getters.js

const getters = {

};
export default getters

7:mutations.js

import * as TYPES from ‘./types‘
const mutations = {
  [TYPES.CHANGE_NUM](state){
    state.number = state.number+1
  },
};

export default mutations

8:types

export const CHANGE_NUM = ‘CHANGE_NUM‘;

9:在组件中使用

computed:{
  ...mapState({
    number:({模块名称})=>模块名称.number,
  })
},

methods: {
...mapActions({
    add:‘模块名称/模块下的方法‘
  })
}

原文地址:https://www.cnblogs.com/sww-blog/p/11066924.html

时间: 2024-10-24 03:24:26

uni-app 使用vuex(vuex module)的相关文章

vuex中module的命名空间概念

vuex中module的命名空间概念 默认情况下,模块内部的 action.mutation 和 getter 是注册在全局命名空间的. 弊端1:不同模块中有相同命名的mutations.actions时,不同模块对同一 mutation 或 action 作出响应. 弊端2:当一个项目中store分了很多模块的时候,在使用辅助函数mapState.mapGetters.mapMutations.mapActions时,很难查询,引用的state.getters.mutations.action

vue npm run unit Error: [vuex] vuex requires a Promise polyfill in this browser.

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR Error: [vuex] vuex requires a Promise polyfill in this browser. at webpack:///~/vuex/dist/vuex.js:145:0 <- index.js:9871 解决方法: npm install --save-dev babel-polyfill karma.conf.js files: [ '../node_modules/babel-

uni.app实践---微信公众号h5开发记实-----第一篇

介绍:==uni-app== 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可编译到iOS.Android.H5.以及各种小程序(微信/阿里/百度/头条/QQ)等多个平台. uni-app官网:传送门 uni-app插件市场:传送门 前一段时间因为个人了解到这个比较nb的多端开发框架,所以有兴趣自己去尝试了一下,从开始的搭建项目到微信公众号h5的登录-->微信支付都尝试了一遍.第一次尝试也踩了很多的坑.相信有很多小伙伴也遇到过这样的疑惑和问题.(大神略过),所以在这里写下

vuex之module

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿. 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module).每个模块拥有自己的 state.mutation.action.getter.甚至是嵌套子模块——从上至下进行同样方式的分割: 在src下建立文件夹store,用于存放各个模块以及根级别的文件 在index.js文件中导出store import Vue from 'vue' import Vue

[Vuex系列] - Module的用法(终篇)

于使用单一状态树,应用的所有状态会集中到一个比较大的对象.当应用变得非常复杂时,store 对象就有可能变得相当臃肿.为了解决以上问题,Vuex 允许我们将 store 分割成模块(module).每个模块拥有自己的state.mutation.action.getter.甚至是嵌套子模块——从上至下进行同样方式的分割: 如何使用module 在store文件夹下新建modules文件夹,并在下面建立moduleA.js和moduleB.js文件用来存放vuex的modules模块 module

vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser问题

如下图所示,项目在IE11下打开报错: 因为使用了 ES6 中用来传递异步消息的的Promise,而IE浏览器都不支持. 解决方法: 第一步: 安装 babel-polyfill . babel-polyfill可以模拟ES6使用的环境,可以使用ES6的所有新方法 $ npm install --save babel-polyfill npm WARN ajv[email protected] requires a peer of [email protected]^6.0.0 but none

uni app video、视频播放开发

视频播放有3种解决方案,使用HTML5的自带video.从HBuilder9.1.3起新增的plus.video的原生视频播放,以及使用Native.js. HTML5自带video标签,可以播放符合HTML5规范的视频格式.注意不含flv.ra等三方商业公司的规范格式.HTML5的video在Android上有较多浏览器兼容性问题,这里有篇网友分享的经典文章讲述了HTML5 video的使用注意,强烈推荐观看.http://ask.dcloud.net.cn/article/569注意事项,A

uni app以及小程序 --环境搭建以及编辑器

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 根据以上网页下载自己电脑相应的版本的微信开发者工具(目录自己创建),然后进行运行安装(建议下载安装) 微信小程序和app比较相似的方式,都可以这个模式进行开发 在H X创建好项目以后可以再谷歌浏览器运行也可以在微信开发者工具上运行(需要进行适配,这个路径就是你刚刚安装工具的那个路径) 这样你就可以运行查看你刚刚创建的项目的效果了(项目目录大致是相通的就不

【uni app】uni ui的引入和调用

npm安装 npm install @dcloudio/uni-ui js引用 import {uniLoadMore, uniDrawer, uniIcons} from '@dcloudio/uni-ui' components: { uniLoadMore, uniDrawer, uniIcons }, 模板中的使用 <uni-icons type="plusempty" size="26"></uni-icons> 原文地址:http

【mock.js】后端不来过夜半,闲敲mock落灯花 (附Vue + Vuex + mockjs的简单demo)

mock的由来[假] 赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正处于项目编码阶段,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,!此时手头仅有一个简单的数据接口文档的赵师秀慨叹一声:"好吧,那还是我自己先模拟一下后端的接口吧" _(:3 」∠)_  再后来,就有了那句千古名句啦~~( 为了表示对赵师秀先生的歉意,文末我将附上原文)   如果我说这就是前后端分离思想和mock.js的由来,你会信么?(?´ω`?) mock的由来[真] 我们在Vu