VueX大致使用
npm install vuex@next --save
在main.js引用
import store from './store'
new Vue({
store
render: h => h(App),
})
使用以及引用方式
- 创建store文件夹,创建index.js文件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/060e9694795ed6b3dd0307b21680835d.png)
- index.js内容
import Vue from 'vue'
import Vuex from 'vuex'
import countOptions from './count'
Vue.use(Vuex)
export default new Vuex.Store({
modules:{
countAbout:countOptions
}
})
export default {
namespaced:true,
actions:{
jiaOdd(context,value){
console.log('actions中的jiaOdd被调用了')
if(context.state.sum % 2){
context.commit('JIA',value)
}
}
},
mutations:{
JIA(state,value){
console.log('mutations中的JIA被调用了')
state.sum += value
}
},
state:{
sum:0,
school:'尚硅谷',
subject:'前端',
},
getters:{
bigSum(state){
return state.sum*10
}
},
}
- 在从components文件夹内的对应.vue的调用方法
- 方法1
- commit指向mutations(mutations——用于操作数据(state))
- dispatch指向actions(actions——用于响应组件中的动作)
methods: {
increment(){
this.$store.commit('JIA',this.n)
}
incrementOdd(){
this.$store.dispatch('jiaOdd',this.n)
}
},
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
computed:{
...mapState('countAbout',['sum','school','subject']),
...mapGetters('countAbout',['bigSum'])
},
methods: {
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
},
- VueX 流程图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d9db9ccac6b6c3265923e41173f51ce6.png)