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

项目一旦开始庞大起来，就会用到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)