使用步骤:
①store里的index.js就代表仓库
②在根组件中引入并注册
③子组件引入注册使用
④在子组件对象中使用方法方法里的数据为:this.$store.commit(" state,payload")
⑤在仓库的mutations中定义方法
⑥mutaions我们的函数中默认第一个参数就是state,第二个参数是payload
mapState自动映射计算属性:
computed:{
// 计算属性一般是只读的,所以说,一般我们会把仓库中的状态映射成组件中的计算属性
// 手动把仓库中的状态映射成组件中的计算属性
// 可以在组件中模板中使用计算属性
// count(){ // count是计算属性 计算属性可以写成一个方法
// return this.$store.state.count
// }
// 下面的代码自动的把仓库中的count状态映射了组件中的计算属性count
...mapState(['count','name','age'])
},
mapGetters把仓库中的状态自动映射成组件的计算属性
// 组件中的计算属性是根据data中的数据计算出一个新的数据
getters:{
// 把getters当成组件中的计算属性 getter是vuex中的计算属性
failNumber(state){
// 第1个参数也是状态
let n = 0;
state.list.forEach(item=>{
if(item.score < 60){
n++
}
})
return n
}
},
自动映射
使用:this.$store.getters.falinumber
computed:{
// 把仓库中的getters映射成组件中的计算属性
// 手动映射
// failNubmer(){
// return this.$store.getters.failNumber
// }
// 把仓库中的getters自动映射成组件中的计算属性
...mapGetters(['failNumber'])
},
Mutations:它是唯一用来修改数据的工具
import { mapMutations } from “vuex”
methods:{
// add(){
// 手动地提交的一个mutations
// this.$store.commit("add")
// }
// 把仓库中的add这个mutations映射成组件的方法
...mapMutations(["add"]) // add是方法
}
mapActions把仓库中的的actions自动映射成组件的方法(操作异步状态,需要在仓库中的action中定义)
methods:{
// addAsync(){
// 在组件中需要dispath一个action
// 在组件中要使用actions,需要dispath派发
// this.$store.dispatch("addAsync")
// }
// 把仓库中的add这个mutations映射成组件的方法
// ...mapMutations(["addAsync"]) // add是方法
// 把仓库中的的action映射成组件的方法
...mapActions(["addAsync"])
}
// 如果你对状态的操作是异步的
// 需要把异步代码写在actions中
// vuex作者规定的,不写在actions中,状态的变化不好跟踪
actions:{
addAsync(context){
// actions中的第一个参数并不是状态,是context
// 异步代码需要放在actoin中
setTimeout(()=>{
// 在action中需要手动的commit一个mutation
// 因为在vuex中改变状态的唯一途径是mutation
context.commit("add"); // 手动提交一个mutaion
},3000)
}
}