Vuex-CSDN博客

1.在组件中如果不用 {{this.$store.state.username }}

在组件中，如果不用 {{this.$store.state.username }} 去获取Vuex中的公共属性的话，还可以使用 mapState。

本来是这样获取Vuex中的公共属性：

<template>
    <div>
        <span>{{ this.$store.state.username }}</span>
        <button @click="clickMe">点击</button>
    </div>
</template>
复制代码

如果使用的是mapState

<template>
    <div>
        <span>{{ username }}</span>
        <button @click="clickMe">点击</button>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    computed: {
        // 这样来获取Vuex中的公共属性
        ...mapState(['username'])
    },
    methods: {
        clickMe() {
            alert(1)
        }
    }
}
</script>
复制代码

2.Vuex去更改公共属性的值

Vuex---购物车

Vuex是用来管理公共状态的，

mutations主要是用来更改状态的，
actions是定义动作的，然后在组件中，去调用actions中的方法。
在组件中，是使用store.dispatch(action)去调用actions中的方法。
然后，在actions中提交到mutations中去。
如果是异步操作，需要通过在actions里面，store.commit提交到mutations。（如果需要去调取接口的话，一般使用actions）。
只要有异步逻辑，就使用actions。在组件中使用store.dispatch(action)去调用actions中的方法。
一般在actions中去调用后台接口，然后很多组件，都可以去调用这个actions中的调接口方法。
如果是同步操作，可以在组件直接通过store.commit提交到mutations。

组件中通过store.dispatch(action)去调用actions中的方法，然后在actions中，通过store.commit()提交到mutations里面，然后在mutations里面去更改状态。

3.Vuex实例--计数器

新建计数器的项目，没有用到Vue CLI 3。

项目工程结构：

3.1 直接去触发mutations中的方法（因为没有涉及调取后台接口）

3.2 或者去使用actions（涉及到异步，或者调取后台接口）

4.Vuex实例--购物车

5.关于 Vuex中的getters

Vuex中的getters相当于 computed

6.组件中的 computed的使用

比如一个组件：

<template>
    <div>
        <!-- 返回的是计算后的属性 -->
        {{ count }}
    </div>
</template>
<script>
export default {
    computed: {
        count() {
            // 返回的结果
            return this.$store.state.count;
        }
    },
    methods: {
        addTen(){
            alert(1);
        }
    }
}
</script>
复制代码

7.使用辅助函数 mapState

用法：

<template>
    <div>
        <!-- 返回的是计算后的属性 -->
        {{ count }}
    </div>
</template>
<script>
import { mapState } from 'vuex';

// 去获取Vuex中的公共属性username
console.log(mapState(['username']));
export default {
    computed: {
        // 这样去获取Vuex中的公共属性count
        ...mapState(['count']);
    },
    methods: {
        addTen(){
            alert(1);
        }
    }
}
</script>
复制代码

8.可以使用 {{ this.$store.getters.username }} 去获取Vuex中getters中的值

<template>
    <div>
        {{ this.$store.getters.username }}
    </div>
</template>
复制代码

9.在组件中使用 mapActions 去代替 store.dispatch 去调用actions中的方法。

在组件中，原来使用 store.dispatch去调取 actions中的方法：

methods: {
    decrementTen(){
        // 调用minusTen这个actions方法，并且传递参数10
        this.$store.dispatch('minusTen', 10);
    }
}
复制代码

如果不用store.dispatch去调取actions中的方法，可以使用mapActions

<script>
import { mapActions } from 'vuex';
export default {
    methods: {
        // 获取到actions中的方法minusTen，默认会挂载到当前Vue的实例上，所以可以用this.minusTen()来调用。
        ...mapActions(['minusTen']),
        decrementTen(){
            // 传入参数10
            this.minusTen(10);
        }
    }
}
</script>
复制代码