uniapp使用vuex进行项目模块化,两种调用方式

刚开始接触uniApp看了一下vuex的使用方法,总结一下在项目中个人认为常用的架构,很实用,做一个新手学习笔记!!!

文件目录结构图

目录结构图

创建store目录

使用HBuilderx创建项目,在项目内创建store目录,在目录内创建index.js文件,如下

namespaced : true 调用时候 需要加上所属的模块名可以参数第二种调用方式

import Vue from 'vue'
import Vuex from 'vuex'
import star_sky from './modules/public/star_sky.js'
Vue.use(Vuex)

const store = new Vuex.Store({

    state: {
        //放置全局变量
    },

    modules: {
        //数据模块化
        star_sky: {
            namespaced: true,
            ...star_sky
        }
    }

})
export default store

在store内创建mutations_type.js

mutations_type.js 是方便异步方法actions 调用同步方法mutations 去更新数据时调用,不容易出错而且模块化后方法是通过所属模块名称去调用

//页面请求实体数据
export const REQUEST_DATA = 'REQUEST_DATA' 

store目录内创建modules

modules 是各个模块对应的文件

modules 内创建公共模块文件夹

public内都是多个UI共享数据,创建star_sky.js 文件

创建star_sky.js

import { REQUEST_DATA } from '../../mutations_type.js' 
const state = {
  ceshidata: []
}

const mutations = {
  [REQUEST_DATA] (state, data) {
    state.ceshidata = data
   }
}
const actions = {
  async getDevicesData ({ commit },data) {
    console.log("UI 界面调用 异步actions 内方法")
         // 异步操作 ---请求数据
              
       //同步操作 更新 ceshidata 数据        
         commit(REQUEST_DATA, data)
  }
}

export default {
  state,
  mutations,
  actions
}

在main.js中配置store

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

调用模块

方式一
  • mapState 是引用模块内state内的数据
  • mapActions 是引用模块内actions 内的方法 (异步)
  • mapGetters 是引用模块内 getters 内的方法 (获取数据)
  • mapMutations 是引用模块内 mutations 的方法 (同步修改state)
  • 在vue script 内引入vuex
import { mapState, mapActions } from 'vuex'
  • mapState
    namespace:true 需要加上模块名称 ,在export default 内 创建 computed 导出 模块 mapState 方法
computed: {
            ...mapState('star_sky', ['ceshidata'])
        }
  • mapActions
    namespace:true 需要加上模块名称 ,在export default 内 创建 methods导出 模块 mapActions方法
methods: {
            ...mapActions('star_sky', ['getDevicesData'])
        }
  • mapGetters
    namespace:true 需要加上模块名称 ,在export default 内 创建 computed 导出 模块 mapGetters 方法
computed: {
            ...mapGetters('star_sky', ['方法名'])
        }
  • mapMutations
    namespace:true 需要加上模块名称 ,在export default 内 创建 methods导出 模块 mapMutations方法
methods: {
            ...mapMutations('star_sky', [REQUEST_DATA])
        }
方式二

这都是建立在namespace:true的前提下,如果namespace:false 则去掉模块名

  • mapState 是引用模块内state内的数据
  • mapActions 是引用模块内actions 内的方法 (异步)
  • mapGetters 是引用模块内 getters 内的方法 (获取数据)
  • mapMutations 是引用模块内 mutations 的方法 (同步修改state)
  • mapState

结构:this.$store.state.模块名.模块属性

this.$store.star_sky.ceshidata
  • mapActions

结构:this.$store.dispatch('模块名 / 模块中的actions',值)

this.$store.dispatch('star_sky/getDevicesData',[{'ceshikey': '第二种方法'}])
  • mapGetters

结构:this.$store.getters.模块名.模块属性

//this.$store.getters.star_sky.doneTodosCount
this.$store.getters.模块名.模块属性
  • mapMutations

结构:this.$store.commit('模块名 / 模块中的mutations',值)

this.$store.commit('star_sky/模块中的mutations',[{'ceshikey': '第二种方法'}])
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容

  • 1、下载 (整体代码在最下面 也可直接查看) 下载vuex,会得到一个store文件夹,内部我们有一个index根...
    柯乐阅读 414评论 0 0
  • 什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式。它采用 集中式 存储管理应用的所...
    酷酷的凯先生阅读 2,458评论 0 0
  • Vuex作为Vue全家桶的成员之一,重要性肯定不用多说,正在做Vue项目的同学,随着项目需求、功能逐渐增加,用到V...
    我是你班主任阅读 6,298评论 2 33
  • 由于Vuex的官方文档在各个模块之间缺乏一些过渡,另外新概念很多,使得初读时总有些云里雾里的感觉。于是本文在官方文...
    一郭鲜阅读 359评论 0 1
  • 习惯养成很容易,戒掉却很难!!! 什么是Vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式...
    前端又又阅读 2,811评论 0 1