- vuex是一个专门为vue.js设计的集中式状态管理架构。状态?把它理解为在data中的属性需要共享给其他vue组件使用的部分。
- 简单的说就是data需要共用的属性
npm n install vuex --save
- 注意:一定要加上--save,因为这个包我们在生产环境中要使用
import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex)
- 我们这个小demo先声明一个state的count状态,在页面中使用显示这个count,然后可以利用按钮进行加减
const state = {
count:3
}
export default new Vuex.Store({
state
})
-
src/store/store.js
const mutations = {
add(state){
state.count++;
},reduce(state){
state.count--;
}
}
这里的mutations是固定的写法,意思是改变的,我们要改变state的数值的方法,必须写在mutations里就可以了。
- 这样进行预览就可以实现对vuex中的count进行加减了。
- const state,这个就是我们说的访问状态对象,它是我们SPA(单页应用程序)中的共享值。
-
count.vue页面中,这种写法看着就麻烦
{{$store.state.count}}
-
简便写法
{{count}}
- 这样就好多了可是怎么实现呢???
想要实现有三种方法
-
1.用import引入mapState
import { mapState } from 'vuex;
-
2.在computed计算属性写
computed:mapState{
count:state=>state.count
}
使用ES6的箭头函数来给count赋值
-
3.通过mapState的数组来赋值
computed:mapState(['count'])
最简单的写法,在实际项目开发中经常这样使用
-
add方法加上一个参数n
const mutations={
add(state,n){
state.count+=n;
},reduce(state){
state.count--;
}
}
-
在Count.vue里修改按钮的commit( )方法传递的参数,我们传递10,意思就是每次加10
- $store.commit()这样的方法写起来麻烦
例如:@click=”reduce” 就和没引用vuex插件一样。
- 要达到这种写法,只需要简单的两部就可以了:
import { mapState,mapMutations } from 'vuex';
script标签里添加methods属性,并加入mapMutations
methods:mapMutations([
'add','reduce'
])
- getters从表面是获取的意思,可以把他看作在获取数据之前进行的一种在编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性
比如我们现在要对store.js文件中的count进行一个计算属性的操作,就是在它输出前,给它加上10
-
我们首先要在store.js里用const声明我们的getters属性。
const getters = {
count(state) {
return state.count+=10;
}
}
-
写好了gettters之后,我们还需要在Vuex.Store()里引入
export default new Vuex.Store({
state,mutations,getters
})
-
count.vue
computed:{
...mapState(["count"]),count(){
return this.$store.getters.count;
}
}
-
首先用import引入我们的mapGetters
import { mapState,mapMutations,mapGetters } from 'vuex'
-
在computed属性中加入mapGetters
computed:{
...mapState(['count']),...mapGetters(['count'])
}
- actions和之前讲的Mutations功能基本一样,不同点是,actions是异步的改变state状态,而Mutations是同步改变状态。
-
actions是可以调用Mutations里的方法,在actions里调用add和reduce两个方法
const actions = {
addAction(context){
context.commit('add',10)
},reduceAction({commit}){
commit('reduce')
}
}
在actions里写了两个方法addAction和reduceAction,两个方法传递的参数不一样
- context:上下文对象,这里你可以理解称store本身。
{commit}:直接把commit对象传递过来,可以让方法体逻辑和代码更清晰明了
-
import引入mapActions
import { mapState,mapGetters,mapActions } from 'vuex'
-
methods方法
methods:{
...mapMutations(['add','reduce']),...mapActions(['addAction','reduceAction'])
}
-
我们现在看的效果和我们用Mutations作的一模一样,肯定有的小伙伴会好奇,那actions有什么用,我们为了演示actions的异步功能,我们增加一个计时器(setTimeOut)延迟执行。在addAction里使用setTimeOut进行延迟执行。
const actions = {
addAction(context){
context.commit('add',10)
setTimeout(()=>{
context.commit('reduce')
},3000)
console.log('我比reduce提前执行')
},reduceAction({commit}){
commit('reduce')
}
}
count.vue
store.js
import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
count:3
}
const mutations = {
add(state,n){
state.count+=n;
},reduce(state){
state.count--;
}
}
const getters = {
count(state) {
return state.count+=10;
}
}
const actions = {
addAction(context){
context.commit('add',10)
setTimeout(()=>{
context.commit('reduce')
},3000)
console.log('我比reduce提前执行')
},reduceAction({commit}){
commit('reduce')
}
}
export default new Vuex.Store({
state,getters,actions
})
<h3 id="六module模块组">六、module模块组
- 随着项目的复杂性增加,我们共享的状态越来越多,这时候我们就需要把我们状态的各种操作进行一个分组,分组后再进行按组编写。
- module:状态管理器的模块组操作
- 项目不是很大,一般不用
{{$store.state.a.count}}
``
computed:{
count(){
return this.$store.state.a.count;
}
}, (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|