vue的状态管理模式——Vuex

目录

1. Vuex

2. 组件绑定的辅助函数

代码说明

3. Module

---

1. Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex是一个状态管理模式(俗称状态机)，将组件共享的数据放到状态机中统一管理，组件想拿数据可以从自己的数据模型中拿，也可以从仓库中拿，把vuex理解成一个仓库.

假设A组件想要那B组件里面的数据

把A组件和B组件的数据放到Vuex中 ，A组件想要获取B组件数据从vuex中拿 ，B组件想要获取A组件的数据从Vuex拿

2. 组件绑定的辅助函数

Vuex提供的组件辅助函数

• mapState()

为组件创建计算属性以 为组件创建计算属性以返回 Vuex store 中的状态。 第一个参数是可选的，可以是一个命名空间字符串。

• mapGetters()

为组件创建计算属性以返回 getter 的返回值 ​ 第一个参数是可选的，可以是一个命名空间字符串。

• mapActions()

创建组件方法分发 action。 返回的结果是一个对象

• mapMutations()

创建组件方法提交 mutation 返回的结果是一个对象

---

代码说明

    
    
    
    
    
    



    

        {
    {$store.state.storeMsg}}
        {
    {$store.getters.upperMsg}}
        提交突变
        分发动作
        提交突变1
        分发动作1
        

        =================
        {
    {storeMsg}}
        {
    {upperMsg}}
    
    

---

3. Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。namespaced表示设置命名空间。

    
    
    
    
    
    



    

        {
    {aMsg}}
        {
    {bMsg}}
        {
    {b1Msg}}
    
    

    
    
    
    
    
    



    

        
moduleA: state-{
    {msg1}} getters-{
    {upperMsg1}}
            修改A数据
        
        
moduleB: state-{
    {msg2}} getters-{
    {upperMsg2}}
            修改B数据