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}
})
