• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

uni-app(四)小程序里的vuex

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

项目一旦开始庞大起来,就会用到vuex了,我们都知道,它是状态存储管理器,相对于本地存储,更加轻量和安全

在小程序里,其实和平时的vue项目里 vuex 使用方法是一样的,所以我们如法炮制

  • main.js 同级创建 store 文件夹,再在文件夹里,创建 index.js、getters.js、data.js
  • 在 main.js 中引入 vuex
    import store from '@/store'
    
    const app = new Vue({
        ...
        store
    })
    app.$mount()

     

  • index.js,注册 vuex,并引入相关文件
    import Vue from 'vue'
    import Vuex from 'vuex'
    import data from './data'
    import getters from './getters'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      modules: {
        data
      },
      getters
    })
    
    export default store

     

  • data.js,操作数据的核心文件,包含了 state、mutations、actions 三大属性
    const data = {
      state: {
        id: 0,
        name: '哈皮'
      },
      mutations: {
        set_name: (state, res) => {
          state.id = res.id
          state.name = res.name
        }
      },
      actions: {
      getList: async ({ commit }, params = {}) => {
            let res = await uni.service.getList(params)
            commit('set_name', res)
            return res
          }
      }
    }
    
    export default data

     

  • getters.js,输出处理完成的数据
    const getters = {
      id: state => state.data.id,
      name: state => state.data.name
    }
    export default getters

     

  • 存储、修改、获取
    // 存储、修改,有两种方法
    // 第一种是 actions,执行commit,再mutations,
    let obj = { ... }
    this.$store.dispatch('getList', obj)
    // 第二种是直接提交 commit,执行 mutations
    this.$store.commit('set_name', obj)
    
    // 获取
    let id= this.$store.getters.id
    let name = this.$store.getters.name
    console.log(id,name)

     


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
用canvas在微信小程序上画时钟发布时间:2022-07-18
下一篇:
编辑器vscode小程序中使用less-shuang_XX发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap