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)