关于Vuex的全家桶状态管理(二)

2018-5-28 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

1:mutations触发状态 (同步状态)

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> </p> </template> <script> import {mapState,mapMutations} from 'vuex' export default{
  name:'hello', //写上name的作用是,如果你页面报错了,他会提示你是那个页面报的错,很实用 //方法三 computed: mapState([ 'count' ]),
  methods:{
   ...mapMutations([ 'jia', 'jian' ])
  }
 } </script>
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

2:getters计算属性

getter不能使用箭头函数,会改变this的指向

在store.js添加getters

 // 计算 const getters = {
  count(state){ return state.count + 66 }
} export default new Vuex.Store({
  state,
  mutations,
  getters
})
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

//count的参数就是上面定义的state对象 
//getters中定义的方法名称和组件中使用的时候一定是一致的,定义的是count方法,使用的时候也用count,保持一致。 
组件中使用

<script> import {mapState,mapMutations,mapGetters} from 'vuex' export default{
  name:'hello',
  computed: {
   ...mapState([ 'count' ]),
   ...mapGetters([ 'count' ])
  },
  methods:{
   ...mapMutations([ 'jia', 'jian' ])
  }
 } </script>
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

3:actions (异步状态)

在store.js添加actions

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定义常量 const state = { count: 1 } // mutations用来改变store状态 同步状态 const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
} // 计算属性 const getters = {
  count(state){ return state.count + 66 }
} // 异步状态 const actions = {
  jiaplus(context){
    context.commit('jia') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000) alert('我先被执行了,然后两秒后调用jian的方法') }, jianplus(context){ context.commit('jian') }
} export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

在组件中使用

<template> <p class="hello"> <h1>Hello Vuex</h1> <h5>{{count}}</h5> <p> <button @click="jia">+</button> <button @click="jian">-</button> </p> <p> <button @click="jiaplus">+plus</button> <button @click="jianplus">-plus</button> </p> </p> </template> <script> import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default{
  name:'hello',
  computed: {
   ...mapState([ 'count' ]),
   ...mapGetters([ 'count' ])
  },
  methods:{ // 这里是数组的方式触发方法 ...mapMutations([ 'jia', 'jian' ]), // 换一中方式触发方法 用对象的方式 ...mapActions({
    jiaplus: 'jiaplus',
    jianplus: 'jianplus' })
  }
 } </script> <style scoped> h5{ font-size: 20px; color: red; } </style>
	
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48

4:modules 模块

适用于非常大的项目,且状态很多的情况下使用,便于管理

修改store.js

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { count: 1 } const mutations = {
  jia(state){
    state.count ++
  },
  jian(state){
    state.count --
  },
} const getters = {
  count(state){ return state.count + 66 }
} const actions = {
  jiaplus(context){
    context.commit('jia') //调用mutations下面的方法
    setTimeout(()=>{
      context.commit('jian')
    },2000) alert('我先被执行了,然后两秒后调用jian的方法') }, jianplus(context){ context.commit('jian') }
}

//module使用模块组的方式 moduleA const moduleA = { state, mutations, getters, actions }

// 模块B moduleB const moduleB = { state: { count:108
  }
} export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB,
  }
})
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: 关于Vuex的全家桶状态管理(二)


Powered by emlog 京ICP备12006971号-1 sitemap