estado
Cree un nuevo archivo store.js, exporte el paquete predeterminado, para que el externo pueda hacer referencia
//定义一个常量
const state = {
count:1
}
//
export default new Vuex.Store({
state
})
referencia de la página vue
<template>
<h3>{
{
$store.state.count}}</h3>//1
</template>
<script>
import store from '@/vuex/store'
export default{
data(){
return{
}
},
store
}
</script>
Taquigrafía, más utilizada en proyectos reales
<template>
<h3>{
{
count}}</h3>//1
</template>
<script>
import {
mapState} from '@/vuex/store'
export default{
data(){
return{
}
},
computed:{
...mapState(['count'])
}
}
</script>
captadores
La comprensión simple es procesar los datos antes de obtener los datos del estado y luego regresar después del procesamiento
//这里每次获取count前会加上1
const getters = {
count:function(state){
return state.count+=1;
}
}
//
export default new Vuex.Store({
state,getters
})
Referencia de página
<template>
<h3>{
{
count}}</h3>//2
</template>
<script>
import {
mapGetters} from '@/vuex/store'
export default{
data(){
return{
}
},
//注意，这里放在计算属性里
computed:{
...mapGetters(['count'])
}
}
</script>
mutaciones
Esto se usa para modificar el estado, el simple entendimiento es modificar el valor del estado
const mutations={
add(state,num){
state.count=num;
},
reduce(state){
state.count-=1;
}
}
export default new Vuex.Store({
state,getters,mutations
})
Referencia de página
<template>
<h3>{
{
count}}</h3>//2=》10，点击下边按钮修改为10
<button @click="addCount(10)">-</button>
</template>
<script>
import {
mapGetters,mapMutations} from '@/vuex/store'
export default{
data(){
return{
}
},
//注意，这里放在计算属性里
computed:{
...mapGetters(['count'])
}
//注意，这里放在methods里
methods:{
...mapMutations({
addCount: 'add',//左边为自定义方法名，右边对应store.js的mutations里方法名
})
}
}
</script>
comportamiento
Las acciones son las mismas que las mutaciones, ambas modifican el estado en la tienda, pero son asincrónicas y las mutaciones deben estar sincronizadas.
const actions ={
addAction({
commit}){
//直接把commit对象传过来
commit('add')//方法名和mutation里定义的一样
}，
reduceAction({
commit}){
commit('reduce')
}
}
export default new Vuex.Store({
state,getters,mutations，actions
})
Referencia de página
<template>
<h3>{
{
count}}</h3>//2=》10，点击下边按钮修改为10
<button @click="addAction(10)">-</button>
</template>
<script>
import {
mapGetters,mapMutations,mapActions} from '@/vuex/store'
export default{
data(){
return{
}
},
//注意，这里放在计算属性里
computed:{
...mapGetters(['count'])
}
//注意，这里放在methods里
methods:{
...mapMutations({
addCount: 'add',//左边为自定义方法名，右边对应store.js的mutations里方法名
}),
...mapActions([
'addAction',
'reduceAction'
])
}
}
</script>