早已开始前,请试著认知上面这那哥的亲密关系,也许有利于你认知上面的相关Vuex的采用如是说。
Vuex采用方式
题题题1、加装假如你早已早已开始了两个工程项目,他们间接运转指示加装Vuex
npminstall vuex
2、注册登记将相关Vuex的标识符留存在增建的文档store.js。总之,您能随便重新命名。他们将在此文档中保有储存第一类,接着将其复制到main.js,他们将在自上而下Vue示例中注册登记Vuex。
增建文档main.js。
在自上而下Vue示例中注册登记Vuex
在他们的store.js文档中,需要在store中储存一些数据,接着其他组件将对其进行mutaition操作state第一类。
他们能采用预定义的关键字将数据添加到他们的store中state,接着像他们在采用data()中的数据一样,用this.$store.state拿到并采用
在一些情况下,他们需要在采用state数据之前进行数据处理或进行一些数学运算。采用getter,他们能对数据执行操作,接着得到处理过的数据结果。getter需要状态第一类,这由Vuex自动传递给getter。
上面例子中,他们早已用过counter这个计算属性,用于跟踪单击按钮的次数,接着检索它。那么,在显示点击次数之前,他们将点击次数增加一倍如何呢?他们能采用getter来达到这个结果。
他们早已创建了getter。让他们在App.vue组件中使this.$store.getters。
更改数据属性的state时,只需执行mutation即可。在mutation中指定要对data属性进行的更改。
让他们创建两个mutation来改变state中的数据。记得,mutations需要访问state第一类才能对指定数据名进行操作。
说到采用mutation,情况有所不同。与getter和state不同,并不会像那样访问mutationthis.$store.mutations。而是commit两个指定的mutation名称。
在clicked()方式中,他们告诉Vuex 提交两个名为increment的mutation,从而更改state中的数据
6、actionsaction调用mutation进行异步操作的功能。与mutation不同,action能包含异步操作。
让他们创建两个action来调用mutation,间接的操作数据。
import Vue from vue;
import Vuex from vuex;
Vue.use(Vuex);
export const store=newVuex.Store({
state:{
counter:0},
getters:{
doubleClicks:state=>{
return state.counter * 2;
}
},
mutations:{
increment:state=>{
state.counter++
}
},
actions:{
asyncIncrement:({commit})=>{
setTimeout(() =>{
commit(increment);
}, 2000);
}
}
})
与mutation类似,我们在应用中dispatch两个action,间接的达到修改数据的效果。
<template> <div class=“home”> <h1>Number of clicks:{{counter}}</h1> <button @click=“clicked”>Start action here</button> </div></template><script>
export default{
computed:{
counter(){
return this.$store.state.counter;
}
},
methods:{
clicked(){
this.$store.dispatch(increment)
}
}
}
</script>以上是Vuex的基本上采用方式,希望有利于你的进一步认知~
历史内容?