Vuex

vuex 全局状态管理器

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，集中式存储管理应用的所有组件的状态

单向数据流

• state，驱动应用的数据源；

• view，以声明方式将 state 映射到视图；

• actions，响应在view上的用户输入导致的状态变化

Vuex 的核心： store（仓库）

store中的状态是响应式的，在组件中调用 store 中的状态仅需要在计算属性中返回即可。触发变化也是在组件的 methods 中提交 mutation。

store.commit 方法触发状态变更

mutations

mutations接收两个参数 （state,payload)

向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）

mapState 辅助函数

解决：组件获取多个状态，状态都声明为计算属性重复和冗余的问题

数组形式 可以直接把 state 中的 属性映射到 computed 中

对象形式 可以为映射之后的值设置一个属性名

在单独构建的版本中辅助函数为 Vuex.mapState

…mapState(扩展运算符) 函数返回的是一个对象

先引入：import { mapState } from ‘vuex’

 computed:{
    ...mapState(["count","msg"]), //可以直接把state中的count映射为计算属性中的count
    ...mapState({
      c:"count"    //// 可以为映射之后的值设置一个属性名
    })
  }

mapMutations 辅助函数

mapMutations可以把vuex中的mutations映射为methods

数组形式 可以直接把 mutations 中的 方法 映射映射到 methods 中

对象形式 可以为映射之后的值设置一个属性名

clickHandle() {
      this.$store.commit("addByStep", { step: 5 });
    },
    ...mapMutations(["addByStep", "reduceByStep"]),
    ...mapMutations({
      a: "addByStep"
    })
  }

Action 异步操作

所有的异步操作都放在这里, 通过dispatch触发一个actions
接受两个参数： context payload
context 当前的上下文store对象
payload 表示传递的参数

actions: {
    /**
     *
     * @param {*} context   当前的上下文store对象
     * @param {*} payload   表示传递的参数
     */
    loadPosts({ commit }, payload) {
      // console.log(context);
      // console.log(payload);
      // commit('loadDataEnd', ['一', '二', '三']);
      axios.get('http://jsonplaceholder.typicode.com/posts').then(res => {
        commit('loadDataEnd', res.data);
      });
    },
  },

mapActions可以把actions映射成methods

使用命名空间把数据进行映射

import { mapActions, mapState } from "vuex";

 methods: {
    ...mapActions(["loadPosts"]),
    // 使用命名空间把数据进行映射
    ...mapActions("product", {
      loadProducts: "loadData"
    }),
    loadMore() {
      this.loadProducts({
        page: this.currentPage
      });
      this.currentPage += 1;
    }
  },

modules

通过modules实现vuex的模块化拆分，可以把状态树按照功能拆分成小文件

namespaced: true, 为当前模块提供命名空间
当我们使用了 modules 和 nameapaced 之后，在触发 action 的时候需要加上命名空间前缀，使用命名空间之后可以把数据和 actions 以及 mutations 等内容做一个独立处理，防止数据串联

 modules:{
    product:{
      namespaced:true,
      state:{
        list:[],
        page:1,
        totalPages:1
      }，
       mutations:{
        loadDataEnd(state,payload){
          console.log(state)
          console.log(payload)
        }
      },
      actions:{
        loadData({commit}){
          commit('loadDataEnd',{
            msg:'天气阴晴不定...'
          })
        }
      }
    },
    cart:{
      namespaced:true,
      state:{
        list:[]
      }
    },
    user:{
      namespaced:true,
      state:{
        info:{}
      }
    },
  }



可以直接调用actions 
 <button @click="$store.dispatch('product/loadData')">获取商品信息</button>
 methods: {
    ...mapActions(["loadPosts"]),
    // 使用命名空间把数据进行映射
    ...mapActions("product", {
      loadProducts: "loadData"
    }),
   }
  ``