Vuex总结

2018-06-24 00:52:00来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

Vuex官网链接:https://vuex.vuejs.org/zh-cn/strict.html

Vuex

  1. 是一个专为 Vue.js 应用程序开发的状态管理模式。
  2. 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
  3. Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
  4. 帮助我们管理新的共享状态
  5. 适合于开发大型单页应用

1.开始安装

在Vue-cli架构中 nmp  i  vuex  --save

在src下新建目录vuex/store.js

2.store.js配置

import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
 
var state={  //
    count:1
};
var mutations={
    add(state,n){
        state.count+=n
    },
    reduce(state){
       state.count--
    }
}
export default new Vuex.Store({//暴露出口
    state,mutations
})

3.五大方法

    1.state

       用于数据管理,可以通过computed直接返出,也可以组件调用,也可以借助mapState()管理 

<template>
  <div>
      <h1>方法一:全局引入{{$store.state.count}}</h1>
      <h1>方法二:computed引入{{count}}</h1>
      <h1>方法三:mapState引入{{count1}}</h1>
  </div>
 
</template>
<script>
import store from"@/vuex/store";
import {mapState} from"vuex"
export default {
  computed:{
      count:function(){return this.$store.state.count},
      ...mapState(['count1'])
  },
  store
}
</script>
import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用

var state={  //
    count:1,
    count1:2
};
export default new Vuex.Store({//暴露出口
    state
})

  2. getter

    主要用于数据的过滤,直接通过computed调用,也可以mapGetters()

<template>
  <div>
      <h1>mapGetters引入{{count_get}}</h1>
  </div> 
</template>
<script>
import store from"@/vuex/store";
import {mapState,mapGetters} from"vuex"
export default {
  computed:{
      ...mapGetters(['count_get'])
  },
  store
}
</script>
import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
var state={  //
    count:1,
};
var getters={
    count_get(state){
        return state.count+1
    }
};
export default new Vuex.Store({//暴露出口
    state,getters
})

 3.mutations

主要用于储存公共方法

直接mapMutations()调用或者commit提交以及传值

<template>
  <div>
      <h1>count的值{{$store.state.count}}</h1>
      <h3>mapMutations方法: <input type="button" value="按钮1" @click=add></h3>
      <h3>$store.commit()方法: <input type="button" value="按钮2" @click="$store.commit('reduce')"></h3>
      <h3>传参方法: <input type="button" value="+10" @click="$store.commit('xx',10)"></h3>      
  </div> 
</template>
<script>
import store from"@/vuex/store";
import {mapState,mapMutations} from"vuex"
export default {
 methods:mapMutations(['add']),
  store
}
</script> 
import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
var state={  //
    count:1,
};
var mutations={
    add(state){
        return state.count++
    },
    reduce(state){
        return state.count--
    },
    xx(state,n){
        return state.count+=n
    }
}
export default new Vuex.Store({//暴露出口
    state,mutations
})

  

 

    

  

 4.actions用于异步方法

<template>
  <div>
      <h1>count的值{{$store.state.count}}</h1>
      <h1>mapActions的methods引入: <input type="button" value="+5 3s -1" @click="add1"></h1>    
  </div> 
</template>
<script>
import store from"@/vuex/store";
import {mapState,mapMutations,mapActions} from"vuex"
export default {
    methods:mapActions(['add1']),store
}
</script>
import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
var state={  //
    count:1,
};
var mutations={
    add(state){
        state.count+=5;
        return state.count
    }
};
var actions={
    add1:function(context){
        context.commit('add');
        setTimeout(()=>{
            state.count--
        },2000)
    }
}
export default new Vuex.Store({//暴露出口
    state,mutations,actions
})

5.modules

  对于大型项目,进行模块化分组管理,store.js可以引入多个类似于store.js的文件,在总文件进行模块化状态管理

<template>
  <div>
      <h1>count的值{{$store.state.a.count}}</h1>
      <h1>mapActions的methods引入: <input type="button" value="+5 3s -1" @click="add1"></h1>    
  </div> 
</template>
<script>
import store from"@/vuex/store";
import {mapState,mapMutations,mapActions} from"vuex"
export default {
    methods:mapActions(['add1']),store
}
</script>
import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
Vue.use(Vuex);//全局使用
var state={  //
    count:1,
};
var mutations={
    add(state){
        state.count+=5;
        return state.count
    }
};
var actions={
    add1:function(context){
        context.commit('add');
        setTimeout(()=>{
            state.count--
        },2000)
    }
}
var moduleA={
    state,mutations,actions
}
export default new Vuex.Store({//暴露出口
    modules:{a:moduleA}
})

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:利用JavaScript制作简易日历

下一篇:before(),after(),prepend(),append()等新DOM方法简介