Vue2.0六——Vuex

Vuex概念

Vuex其实就是专门为vue设计的集中式状态管理架构，也就是说项目中共享的一些数据

 应用及的数据放在store中；改变数据的方式是提交mutations，这是个同步的事物，异步逻辑应该封装在action中
 数据流：前端通过action将传过来的数据进行处理或直接得到数据，
 然后通过mutation把处理后的数据存放到数据库state中 ，
 谁要用就要通过getter从数据库state中取

Vuex的五种属性

State、Mutation 、Action、Getter、 Module

• state的特性

  一、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data
  二、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
  三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

• mutation的特性
  mutations 与事件类似，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
  只有他才能修改store 调用他用commit对象，用来存储修改状态的方法
  （默认第一个参数state，第二个负载对象参数payload）

     // 调用方法一
     this.$store.commit('getGoodsList',this.goodsList)
     //调用方法二
     this.$store.commit({
         type: 'getGoodsList',
         list: this.goodsList
         
     })

• getter的特性

  一、getters 可以对State进行计算操作，它就是Store的计算属性
  二、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
  三、 如果一个状态只在一个组件内使用，是可以不用getters
  
  getters: {
     returnTabIndex:state => state.tabIndex 
  }

• actions

  一、Action 类似于 mutation，不同在于：
  二、Action 提交的是 mutation，而不是直接变更状态。
  三、Action 可以包含任意异步操作
  

  异步请求的时候用

     
     commit => mutations
     dispatch => actions
     接收：
     action : {
         increment ({commit},payload) {
             setTimeout(()=>{
                 commit('increment')
             })
         }
     }
     分发：
     this.$store.dispatch('increment',{amount:10})
     //调用方法二
     this.$store.dispatch({
         type: 'increment',
         amount: 10
         
     })
     

• module
  vuex将store(一个项目只有一个store)分成模块

     //公用
     state: {},
     mutaions:{},
     action:{},
     getter:{}
     
     const moduleA = {
         state: { tabIndex: ''},
         mutaions:{},
         action:{},
         getter:{}
     }
     
     读取：
     this.$store.state.a.tabIndex

例子（存商品详情）

• view层 点击商品 并 将详情信息存到store中

     <li @click="gotoDetail(items)" v-for="(items,index) in products" :key="index">
         <img v-lazy.container="items.goodsListImg"/>
         <div class="info">{{items.goodsName}}</div>
         <div class="prices">
             <span class="price">&yen;{{items.price}}</span>
             <span class="buybtn">抢购</span>
         </div>
     </li>
     
     gotoDetail(info) {
         this.$store.commit({
             type: 'GET_PRO_DETAIL',
             productInfo :info
         })
         this.$router.push({name: 'detail'})
     }
  

• view层详情页获取数据

  data(){
      return {
          goodsInfo: this.$store.state.productDetail.productInfo
      }
  }
  

• vuex => store
  先安装vuex cnpm i vuex -S

  //引入
  import Vue from 'vue'
  import Vuex from 'vuex'
  
  //模块
  import productsList from './modules/products-list'
  import productDetail from './modules/product-detail'
  
  import * as types from './mutation-types'
  
  Vue.use(Vuex)   
  // 这里只定义全局通用的状态
  // 几个子页面或组件间共享的状态按所属模块写到modules中   
  const store = new Vuex.Store({
     state : {
         currentPage: '',
         userInfo: {}
     },
     
     //模板
     modules: {
         productsList,
         productDetail,
         commentsList,
         cartList
     },
     mutations: {
         setPageName(state,payload) {
             state.currentPage = payload
             console.log('切到' + state.currentPage)
         },
         getUserInfo(state,payload) {
             state.userInfo = payload
             console.log('用户信息')
             console.log(state.userInfo)
         }
       }
     })
     export default store   
  

• moutaion-types.js
  模块中的mutation类型在这里统一管理，使用大写常量进行定义

  //产品详情
  export const GET_PRO_DETAIL = 'GET_PRO_DETAIL'
  ...
  
  

• modules/product-detail.js

  import * as types from '../mutation-types'
  const state = {
     
  }
  
  const getters = {
     
  }
  
  const mutations = {
     [types.GET_PRO_DETAIL] (state,productInfo) {
         state.productInfo = productInfo
         console.log('详情 存了')
     }
  }
  
  export default{
     state,
     mutations
  }
  
  这个例子不是很好。。。看下一个对list数据处理
  
  

• modules/product-list.js

     // 产品列表状态
     import * as types from '../mutation-types'
     
     const state = {
         productsList : [],
         defaultlist: []
     }
     const getters = {
         realList:(state)=>{
             return (type) => {
                 const data = state.productsList
                 
                 switch(type) {
                     case 0:  return state.defaultlist;break;
                     case 1:  return data.sort((a,b) => {return a.price - b.price});break;
                     case 2:  return data.sort((a,b) => {return b.price - a.price});break;
                     case 3:  return data.sort((a,b) => {return a.discount - b.discount});break;
                     case 4:  return data.sort((a,b) => {return b.discount - a.discount});break;
                 }
             }
         },
     }
     const actions = {
         getProlist({ commit },{ productslist }){
             commit(types.SAVE_PRO_LIST,productslist)
         }
     }
     const mutations = {
         [types.SAVE_PRO_LIST] (state,productslist) {
             state.productsList = productslist
             state.defaultlist = productslist
             console.log('列表 存了')
         }
     }
     
     export default {
         state,
         mutations,
         actions,
         getters
     }