uni-app中使用vuex

原文链接，为了防删，uni中可以使用vuex
1、main.js 同级创建 store 文件夹，再在文件夹里，创建 index.js、getters.js、data.js
2、在 main.js 中引入 vuex

import store from '@/store'

const app = new Vue({
    ...
    store
})
app.$mount()

3、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

4、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

5、getters.js，输出处理完成的数据

const getters = {
  id: state => state.data.id,
  name: state => state.data.name
}
export default getters

6、存储、修改、获取

// 存储、修改，有两种方法
// 第一种是 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)