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)