脚本宝典收集整理的这篇文章主要介绍了Vuex 学习笔记,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
VUEX是什么?
用来解决组件之间共用数据问题的一个插件
在该文件中引入vue和vuex,并在vue中启用vuex
Improve vue from 'vue'
Improve vuex from 'vuex'
vue.use(vuex)
在该文件中配置 state,mutations,actions
//这里的state是数据实际储存的地方
const state={
count:10
}
const mutations={
add(state,param){
state.count += param
},
reduce(state,param){
state.count -= param
}
}
const actions={
add:({commit},param)=>{
commit('add',param)
},
reduce:({commit},param)=>{
commit("reduces",param)
}
}
只有一个store配置的方法
将以上配置在Vuex对象中实例化并导出
export default new vuex.Store({
state,
mutations,
actions
})
在main.js中引用该vuex的store实例
improt store from './store'
new vue ({
......
store,
......
})
在组件中使用vuex的store实例
在页面中引用该实例state的值 $store.state.count
引入该实例的actions
import {mapActions} from ‘vuex’
export default {
methods:mapActions([‘add’,’reduce’])
}
页面使用actions @click='add(param)'
@click='reduce(param)'
有多个store配置的方法
将以上配置在Vuex对象中实例化并导出
export default new vuex.Store({
module:{
a: {
state,
mutations,
actions
}
}
})
在main.js中引用该vuex的store实例
improt store from './store'
new vue ({
......
store,
......
})
在组件中使用vuex的store实例
在页面中引用该实例state的值 $store.state.a.count
调用该实例的actions
import {mapActions} from ‘vuex’
export default {
methods:mapActions('a',[‘add’,’reduce’])
}
页面使用actions @click='add(param)'
@click='reduce(param)'
这篇笔记主要是本人学习Vuex时候的知识总结,如果有不对的地方还请多多斧正
以上是脚本宝典为你收集整理的Vuex 学习笔记全部内容,希望文章能够帮你解决Vuex 学习笔记所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。