vuex的基本使用
vuex的基本使用
一,想要获取vuex中的数据,用mapStore
import { mapStore } from ‘vuex’
1 mapStore([‘aa’, ‘bb’])=>会将vuex中的数据直接映射到当前组件的计算属性
2 注意点,不能与组件中的数据重名=》用对象可以设置别名mapStore({list1:‘list’})
3 如果还需要提供自己的计算属性
...mapStore(),
自己的计算属性
}
二,修改state=》mutation(只能处理同步代码)
1 需要提交mutations 参数是一个对象
this.$store.commit('del', { id })
},
在mutations中写函数del
state.list = state.list.filter(v => v.id !== payload.id)
},
注意点:mutations中的函数参数只有两个,state-》vuex中的state,payload-》传过来的参数对象
2 如果只有一个提交的代码可以使用mapMutations简化
import { mapMutations } from ‘vuex’
methods:{
…mapMutation([‘del’]),
}
注意点:提交的参数是对应mutations里面的del的-》在template中参数就是一个对象
三,计算属性getters(根据state计算得来的)
vuex中计算:
showFooter () {
return 逻辑(state.list.length)
}
}
组件中获取
...mapGetters(['leftCount', 'showFooter', 'showCompleted'])
}
四,actions 执行异步操作
需要分发actions=》actions提交mutations
分发:
clear () {
this.$store.dispatch('clear')
}
}
提交:
clear (context) {
setInterval(() => {
context.commit('clear')
}, 1000)
}
}
项目中什么时候会用到actions
1 完全不用,异步的操作都在组件内部完成
2 全用actions 异步的操作都在actions中完成
好处,例子:有很多组件都需要发送一个请求,不用actions,每个组件都要封装一遍很麻烦,可以在actions中封装,组件分发一下就行,或者用mapActions
...mapActions(['clear'])
}
strict=>严格模式上线时一定要关掉