javascript 使用Axios的Vuex Action示例

Posted 2021-05-03

// In a Vuex store file
const baseUrl = "http://localhost:3500"
const productsUrl = `${baseUrl}/products`
const categoriesUrl = `${baseUrl}/categories`

Vue.use(Vuex)
 
export const store = new Vuex.Store({

  ...
  mutations: {
    setData(state, data) {
      state.products = data.pdata
      state.productsTotal = data.pdata.length
      state.categoriesData = data.cdata.sort()
    }
  },

  actions: {
    async getData(context) {
      let pdata = (await Axios.get(productsUrl)).data;
      let cdata = (await Axios.get(categoriesUrl)).data;
      context.commit("setData", { pdata, cdata} );
    }
  }
  
}

// Exampl Vue component (App.vue)
// We want the data right away, so use the created() hook
<script>
import { mapActions } from 'vuex'

export default {
  name: 'app',
  components: { Store },
  methods: {
    ...mapActions(["getData"])
  },
  created() {
    this.getData();
  }
}
</script>