Vuex官网链接:https://vuex.vuejs.org/zh-cn/strict.html
Vuex
- 是一个专为 Vue.js 应用程序开发的状态管理模式。
- 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
- Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
- 帮助我们管理新的共享状态
- 适合于开发大型单页应用
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} })