Vuex的学习-2
Vuex的核心概念
- State
- Mutation
- Action
1.State
State提供唯一的公共数据源，所有共享的数据都统一放在Store的State中进行存储。
const store = new Vuex.Store({state : { count: 0 }
})
这是渲染的页面
组件访问数据的第一种方式
组件访问数据的第二种方式
// 1.从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性
// 2.将全局数据，映射为当前组件的计算属性
computed:{...mapState(['count'])
} 
2.Mutation
Mutation用来更改Store中的数据
- 只能通过mutation来更改Store数据，不可以直接操作Store中的数据
- 通过这种方式操作可以更好的集中监控所有数据的变化
触发mutations的第一种方式
A.-1
// 定义Mutation
const store = new Vuex.Store({state:{count:0},mutations:{add(state){//变更状态state.count++}}
})// 触发mutation
methods: {btnAdd() {//触发 mutation 的第一种方式this.$store.commit('add')}
}
B.-n
// 定义Mutation
const store = new Vuex.Store({state : {count : 0},mutations : {addN(state,step){// 变更状态state.count += step}}
})// 触发 mutation
methods : {handle(){// 在调用 commit 函数// 触发 mutationas 携带参数this.$store.commit('addN',3)}
}
触发mutations的第二种方式
// 1.从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的 methods 方法
// 2.将指定的mutations函数，映射为当前组件的methods函数
methods:{...mapMutations(['add','addN'])
}A.-1
B.-n
3.Action
Action用于处理异步任务。
如果通过异步操作变更数据，必须通过Action，不能使用Mutation，但是在Action中还是要通过触发Mutation的方式简介变更数据。
触发actions的第一种方式
A不带参数
// 定义 Action
const store = new Vuex.Store({//...mutations : {add(state){state.count++}},actions :{addAsync(context){setTimeout(() => {context.commit('add')},1000)}}
})// 触发 Action
methods : {btnAdd3 () {//触发 actions的第一种方式this.$store.dispatch('addAsync')}
}
B带参数
// 定义 Action
const store = new Vuex.Store({//...mutations : {addN(state, step){state.count += step}},actions :{addNAsync(context, step){setTimeout(() => {context.commit('addN', step)},1000)}}
})// 触发 Action
methods : {btnAdd4 () {// 在调用 dispatch 函数// 触发 actions 时携带参数this.$store.dispatch('addNAsync', 5)}
}
触发actions的第二种方式
// 1.从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组建的 methods 方法
// 2.将指定的 actions 函数，映射为当前组件的 methods 函数
methods:{...mapActions(['addAsync','addNAsync'])
}A.-1
B.-n
这就是大体步骤
4.Getter
Getter用于随Store中的数据进行加工处理形成新的数据
- Getter对Store中已有数据加工处理之后形成新的数据，类似vue的计算属性
- Store中数据发生变化，Getter的数据也会跟着变化
// 定义Getter
const store = new Vuex.Store({state : {count : 0},getters : {showNum: state => {return `当前数据是${state.count}`}}
})// 触发 mutation
methods : {handle(){// 在调用 commit 函数// 触发 mutationas 携带参数this.$store.commit('addN',3)}
}定义Getters
使用getters的第一种方式
this.$store.getters.名称 
使用getters的第二种方式
import { mapGetters } from 'vuex'computed: {...mapGetters(['showNum'])
}