Vue全家桶之vuex回顾

瑾以此篇文章记录我们的故事，vue，爱过

vuex

• vuex是vue中的一个全局状态管理插件

vuex单项数据流

• vue中派发一个action 改变vuex中的state，state数据改变之后view视图重新渲染

简单来讲

view 通过 dispatch 派发一个action组件（异步操作），如果有网络请求，在action中进行，然后通过commit提交至mutations，改变state中数据，组件重新渲染view

vuex五大核心功能

1）state
存储数据
2） actions
用来进行数据异步改变
3）mutations
同步改变数据
4）modules
模块。在大型应用中，为提高代码可读性，对代码进行分模块处理
5）getters
计算属性。当state中数据改变之后，可以使用getters监听数据的改变

项目中使用vuex

• src根目录下下新建一个store文件夹 引入vuex并实例化

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default new Vuex.Store({})

• 再在入口文件main,js中引入

import store from "./store";

new Vue({
  router,
  store, //t vuex 相当于store：store
  render: h => h(App),
}).$mount("#app");

• 根据需求 丰富一下store

export default new Vuex.Store({
  //t 表示数据
  state: {
    count: 1,
    name: "vuex的一个demo",
  },
  //t 表示同步的方式改变数据
  mutations: {
    /**
     * t state 当前的state中的数据
     * t payload 表示传递的参数
     */

    add(state, payload) {
      console.log(state);
      console.log(payload);
      state.count += payload.step;
      state.name = payload.name;
    },
    addOne(state, payload) {
      console.group("addOne执行了");
      console.log(payload);
      console.groupEnd();
    },
  },
  // t 异步改变数据
  actions: {
    asyncAdd({ commit, dispatch }, payload) {
      console.log("这是异步改变");
      // console.log(context);
      // console.log(payload);
      //t dispatch可以继续触发下一个action
      //t commit表示提交一个mutation改变state中的数据
      //t 不推荐在action中改变state中的数据，在mutation中改变其数据，有迹可寻
    },
  },
  modules: {
    products,
    user, //t 在当前vuex中使用刚才定义好的模块
  },
});

• store文件夹下新建一个modules文件夹，在其下新建一个products.js，放store操作数据的方法

import { allProducts } from "../../api/product";

export default {
  namespaced: true, //t 表示使用命名空间
  state: {
    list: [{ name: "商品", price: 4 }],
    query: {},
    page: 1,
    totals: 0,
    totalPages: 1,
  },
  mutations: {
    addToList(state) {
      state.list.push({
        name: Math.random(),
        price: 5,
      });
    },
    loadDataEnd(state, payload) {
      // console.log(state);
      // console.log(payload);
      state.list = payload.products;
      state.totals = payload.totalCount;
      state.page = 1;
      state.totalPages = payload.page;
    },
  },
  actions: {
    // loadData({ commit, dispatch }, payload) {
    //   //t 调用接口
    //   allProducts().then(res => {
    //     //t 提交mutations改变数据，把网络请求结果传过去
    //     commit("loadDataEnd", res.data);
    //   });
    // },

    //t 网络请求为异步操作，请求完成做提交
    async loadData({ commit, dispatch }, payload) {
      const result = await allProducts();
      commit("loadDataEnd", result.data);
    },
  },
  getters: {
    //t getters相当于计算属性，依赖项发生改变则重新计算
    sumPrice(state) {
      let sum = 0;
      state.list.forEach((item, index) => {
        sum += item.price;
      });
      return sum;
    },
  },
};

• 最后组件里调用

<script>
import { mapActions, mapState } from "vuex";
//t 从vuex中获取并展示数据
export default {
  created() {
    this.loadData();
  },
  methods: {
    ...mapActions("products", ["loadData"]),
  },
  computed: {
    ...mapState("products", ["list"]),
  },
};
</script>

总之，用状态管理工具的好处就是：页面只用来展示数据，数据处理都在vuex