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">¥{{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 }
相关推荐
CSCCockroach 2020-09-15
lbPro0 2020-07-05
MrSunOcean 2020-06-21
lylwanan 2020-06-14
Callmesmallpure 2020-05-31
ShaLiWa 2020-05-25
墨龙吟 2020-04-24
MrSunOcean 2020-04-24
H女王范儿 2020-04-22
lbPro0 2020-04-16
ShaLiWa 2020-02-29
ShaLiWa 2020-01-17
MrSunOcean 2020-01-03
lbPro0 2020-01-01
H女王范儿 2019-12-29