标签:count 触发 console 渲染 actions state context vuex store
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
let store = new Vuex.Store({
state: {
count: 0
},
getters: {
showCount (state) { return state.count }
},
mutations: {
add (state, step = 0) {
state.count++
state.count += step
}
},
actions: {
aysAdd (context, step = 0) {
console.log(context)
setTimeout(() => {
console.log(step)
console.log(context)
context.commit('add', 1)
}, 2000)
}
}
})
console.log(store)
export default store
如上vuex的封装
例如:
- 在页面的created里面使用this. s t o r e 触 发 a c t i o n s 的 a y s A d d 请 求 , 写 法 ( t h i s . store触发actions的aysAdd请求,写法(this. store触发actions的aysAdd请求,写法(this.store.dispatch(‘aysAdd’,‘参数’))
- 在actions里声明如代码所示
- 通过context.commit(‘add’,参数)触发mutations的函数add
- mutations的add再设置值到state里面
- 在使用的组件中使用
...mapState(['count'])
,即可无缝使用count
标签:count,触发,console,渲染,actions,state,context,vuex,store 来源: https://blog.csdn.net/weixin_39238520/article/details/120306562
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。