Vue项目中使用vuex详解

const store=new Vuex.store({
//state中存放的就是全局共享的数据
state:{count:0}
})

new vue({
el:'#app',
render:h=>h(app),
router,
//将创建的共享数据对象，挂载到Vue实例中
//所有的组件，就可以直接从store中获取全局的数据了
store
})

//创建store数据源，提供唯一-公共数据
conststore=newVuex.store({
state:{count:0}
})

this.$store.state.数据变量名

computed:{
...mapState(['变量名'])
}

exportdefaultnewVuex.Store({
state:{
count:0
},
mutations:{//定义mutation
add(state){
state.count++
}
}
})
//组件中使用
methods:{
add(){
//触发mutation
this.$store.commit('add')
}
}

export default new Vuex.Store({
state:{
count:0
},
mutations:{
addN(state,step){
//变更状态
state.count+=step
}
}
})
//组件中使用
methods:{
add(){
//触发mutation时携带参数
//commit的作用，就是调用某个mutation函數
this.$store.commit('addN',3)
}
}

//1.从vuex中按需导入mapMutations函数
import{mapMutations}from'vuex'

//2.将指定的mutations函数，映射为当前组件的methods函数
methods:{
...
mapMutations(['sub'])
}

export default new Vuex.Store({
state:{
count:0
},
mutations:{
add(state){
state.count++
},
actions:{
addAsync(context){
setTimeout(()=>{
context.commit('add')
},1000)
}
},
})
//组件中使用
methods:{
addAsync(){
这里的dispatch函数，专门用来触发action
this.$store.dispatch('addAsync')
}
}

export default new Vuex.Store({
state:{
count:0
},
getters:{
showNum(state){
return'当前最新的数量是：'+state.count
}
}

this.$store.getters.名称

import{mapGetters}from'vuex'
computed:{
...
mapGetters(['showNum'])
}