vuex模块下的使用

在store文件夹下的index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import user from './modules/user'
import product from './modules/product'

Vue.use(Vuex)

// 不能访问this
const store = new Vuex.Store({
    // state: {
    //     userList: [1, 1, 1]
    // },
    modules: {
        user,
        product
    }
})

export default store

store文件夹下建立modules文件夹，建立

const product = {
    namespaced: true,
    state: {
        productList: [23, 56, 89, 34],
        total: 100
    },
    actions: {
        changeProductList({ commit }) {
            commit("CHANGE_PRODUCT_LIST", [5, 6, 7])
        },
        changeTotal({ commit }) {
            commit("CHANGE_TOTAL", 'Jenny')
        },
        changeUserList({ commit }) {
            console.log('product模块-changeUserList');
        }
    },
    mutations: {
        CHANGE_PRODUCT_LIST: (state, payload) => state.productList = payload,
        CHANGE_TOTAL: (state, payload) => state.total = payload
    },
    getters: {
        filterProduct: state => state.productList.filter(item => item > 40)
    }
}
export default product

组件中使用

<template>
  <div class="product">
    商品---{{ total }}

    <p><button @click="changeTotal">修改total</button></p>
    <p>
      <button @click="changeProductList([123, 567, 10])">
        修改productList
      </button>
    </p>
    <p>getters: {{ filterProduct }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  computed: {
    // total() {
    //   return this.$store.state.product.total;
    // },
    // filterProduct() {
    //   //错误写法
    //   // return this.$store.getters.product.filterProduct;

    //   //正确
    //   return this.$store.getters["product/filterProduct"];
    // },
    ...mapState({
      total: (state) => state.product.total,
    }),
    ...mapGetters({
      filterProduct: "product/filterProduct",
    }),
  },
  methods: {
    // changeTotal() {
    //   this.$store.dispatch("product/changeTotal");
    // },
    // changeProductList() {
    //   this.$store.commit("product/CHANGE_PRODUCT_LIST", [1, 2, 78, 90]);
    // },
    ...mapActions({
      changeTotal: "product/changeTotal",
    }),
    ...mapMutations({
      changeProductList: "product/CHANGE_PRODUCT_LIST",
    }),
  },
};
</script>

<style>
</style>