vue学习笔记（十）——Vuex（状态管理，组件间共享数据）

1. vuex基础-介绍

1.1 为什么会有Vuex ?

在现代 Web 开发复杂多变的需求驱动之下，组件化开发已然成为了事实上的标准。然而大多数场景下的组件都并不是独立存在的，而是相互协作共同构成了一个复杂的业务功能。

组件间的通信成为了必不可少的开发需求。

1.2 Vuex介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享的问题。

state：状态
mutation：突变；（生物物种的）变异；（形式或结构的）转变；改变
action：行为；（身体部位的）动作；活动；操作；措施；

结论
        ① 修改state状态必须通过mutations
        ② mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
        ③ 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
        ④ state的状态即共享数据可以在组件中引用
        ⑤ 组件中可以调用action

2. vuex基本使用

① 下载vuex
    yarn add vuex --save（-S）或 npm i vuex --save
        说明： vue 2.0版本命令：yarn add vuex@3 --save（-S）或 npm i vuex@3 --save，否则版本不兼容
-S 与 --save 的简写，安装包信息会写入 dependencies 中
-D 与 --save-dev 的简写，安装包写入 devDependencies 中
dependencies 与 devDependencies
        dependencies 生产阶段的依赖，也就是项目运行时的依赖，项目上线运行时依然需要的
        devDependencies 开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用的

② 引入

在main.js中 import Vuex from 'vuex'

③ 注册

在main.js中 Vue.use(Vuex) => 调用了 vuex中的一个install方法

④ 实例化对象

⑤ 注入vue实例

3. vuex-state使用

state是放置所有公共状态的属性，如果你有一个公共状态数据，你只需要定义在 state对象中。类似与data。

// 初始化vuex对象
const store = new Vuex.Store({
  state: {
    // 管理数据
    count: 0
  }
})

3.1 如何在组件中获取count?

① 原始形式- 插值表达式

组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性属性获取count，如下：

<div> state的数据：{{ $store.state.count }}</div>

② 计算属性 - 将state属性定义在计算属性中

// 把state中数据，定义在组件内的计算属性中  
computed: {    
    count () {      
        return this.$store.state.count    
    }  
}

 <div> state的数据：{{ count }}</div>

③ 辅助函数 - mapState

mapState是辅助函数，帮助我们把store中的数据映射到组件的计算属性中, 它属于一种方便用法。
用法：
第一步：导入mapState

import { mapState } from 'vuex'

第二步：采用数组形式引入state属性

mapState(['count'])

第三步：利用延展运算符将导出的状态映射给计算属性

computed: {
    ...mapState(['count'])
}

 <div> state的数据：{{ count }}</div>

4. vuex-mutations使用

使用上述的 addCount 方法，点击按钮后，网页中展示的 count 值会加1，但是vuex中共享状态state中的count值不会+1，如下图所示。

这是因为state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成数据快照 。数据快照：一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步。

4.1 定义mutations

mutations是一个对象，对象中存放修改state的方法

const store  = new Vuex.Store({
    state: {
        count: 0
    },
    // 定义mutations
    mutations: {
        // 方法里参数 第一个参数是当前store的state属性
        // payload 载荷 运输参数 调用 mutaiions 的时候 可以传递参数 传递载荷
        addCount (state, payload) {
            state.count += payload
        }
    }
})

4.2 如何在组件中调用mutations中的方法（提交）

① 原始形式调用

<template>
  <button @click="addCountTest">原始方式调用，点击按钮state的值+ 10</button>
</template>

<script>
export default {
    methods: {
    // 原始方式调用方法
      addCountTest() {
         // 调用store中的mutations 提交给 muations
        // commit('muations名称', 参数)
        this.$store.commit('addCount', 10)  // 直接调用mutations
    }
  }
}
</script>

② 辅助函数形式-mapMutations

mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入

<template>
  <button @click="addCount(100)">原始方式调用，点击按钮state的值+ 100</button>
</template>

<script>
import  { mapMutations } from 'vuex'
export default {
  methods: {
      ...mapMutations(['addCount'])
  }
}
</script>

上面代码的含义是将mutations的方法导入了methods中，等同于原始方式的调用。但是请注意： Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中。

5. vuex-actions使用

state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作

5.1 定义actions

const store  = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        addCount (state, payload) {
            state.count += payload
        }
    },
    //  获取异步的数据
    actions: { 
        // context 表示当前的 store 的实例 
        // 可以通过 context.state 获取状态 
        // 也可以通过 context.commit 来提交 mutations 
        // 也可以 context.diapatch 调用其他的 action
        getAsyncCount (context，val) {
            setTimeout (() => {
                // 模拟异步请求
                // 一秒钟之后 要给一个数 去修改state
                context.commit('addCount', val)
            }, 1000)
        }
    } 
})

5.2 组件中对actions中的异步方法调用(派遣)

① 原始形式调用

<template>
  <div>
    <button @click="add(222)">原始形式异步调用，点击 + 222</button>
  </div>
</template>

<script>
export default {
  methods: {
    add(val) {
      // dispatch 派遣 发送
      this.$store.dispatch('getAsyncCount',val)
    }
  }
}
</script>

② 辅助函数形式-mapActions

actions也有辅助函数，可以将action导入到组件中

<template>
  <div>
    <button @click="getAsyncCount(222)">辅助函数形式异步调用，点击 + 222</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(['getAsyncCount'])
}
</script>

6. vuex-getters（类似过滤器）

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

例如，state中定义了list，为1-10的数组，

state: {
    list: [1,2,3,4,5,6,7,8,9,10]
}

组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它

6.1 定义getters

 getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
    filterList: (state) => {
        return state.list.filter((item) => {
            return item > 5
    })
}

6.2 使用getters

① 原始方式

<div>{{ $store.getters.filterList }}</div>

② 辅助函数 - mapGetters


<template>
  <div>
     <div>{{ filterList }}</div>
  </div>
</template>

<script>
import { mapGetters} from 'vuex'
export default {
  computed: {
    ...mapGetters(['filterList'])
}
</script>

vuex中state、mutations、actions、getters使用的详细代码如下：

main.js

import Vue from 'vue'
import App from './App.vue'
//  下载，引入，注册，实例化对象，注入
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  //  共享的数据，类似于 data，在计算属性中使用
  state: {
    count : 0,
    list: [1,2,3,4,5,6,7,8,9,10]
  },
  //  更改共享的状态，必须使用 mutations 中的提交方法
  mutations: {
    //  第一参数 state 是当前 store 中的 state 属性
    addCount(state, payload) {
      return state.count += payload
    }
  },
  // 通过 action修改异步任务中的数据，派遣 mutations中的方法提交
  actions: {
    //  使用延时函数来模拟异步请求
    // context 表示当前的 store 的实例 
    asyncAddCount (context, val) {
      return setTimeout(() => {
        context.commit('addCount', val)
      },1000)
    }
  },
  getters: {
    // getters里函数的第一个参数是 state
    // 必须要有返回值
    filterList: (state) => {
      return state.list.filter((item) => {
        return item > 5
      })
    }
  }
})


Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

组件中的应用：

<template>
  <div>
    <p>原始方式调用state里count的值:<span>{{ $store.state.count }}</span></p>
    <p>使用计算属性的方式调用state里count的值: <span>{{ count2 }}</span></p>
    <p>使用辅助函数的形式调用state里count的值: {{ count }}</p>
    <button @click="addCountTest">使用原始的方式修改count的值 + 1</button>
    <button @click="addCount(123)">使用辅助函数的方式修改count的值 + 123</button> 
    <hr>
    <p>在组件中对actions中的异步方法进行调用</p>
    <button @click="asyncAdd">原始方式异步派遣count值 + 333</button>
    <button @click="asyncAddCount(444)">辅助函数方式异步派遣count值 + 444</button>
    <hr>
    <p>原始方式调用list中大于5的值为: {{ $store.getters.filterList }}</p>
    <p>辅助函数方式调用list中大于5的值为: {{ filterList }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { mapMutations } from 'vuex';
import { mapActions } from 'vuex';
import { mapGetters } from 'vuex';
export default {
  computed: {
    count2 () {
      return this.$store.state.count
    },
    // mapState 方法以数组的方式引入到计算属性中，所以需要使用扩展运算符 ...映射出 count的值 
    ...mapState(['count']),
    ...mapGetters(['filterList'])
  },
  methods: {
    //  虽然网页中的值会加 1，但是 vuex中 state 中的 count 值不会变化，
    // 因为 state 中的数据只能通过 mutations 中的方法进行修改，所以此种方式是错误的方法 
    // addCountTest () {
    //   this.$store.state.count += 1
    // }
    addCountTest() {
      //  提交 mutations 中的 addCount 方法
      this.$store.commit('addCount', 1)
    },
    //  使用辅助函数的形式
    ...mapMutations(['addCount']),
    //  派遣 actions 中的 asyncAddCount 方法
    asyncAdd () {
      this.$store.dispatch('asyncAddCount',333)
    },
    ...mapActions(['asyncAddCount'])
  }
}
</script>

<style>

</style>

7. 总结口诀（重点）

7.1 vuex 基本使用

下载，引入，注册，对象，注入

下载vuex的版本记得与vue的版本匹配

state相当于data，组件里使用用computed

mutations中的方法（methods）用于同步提交（commit）使用，方法里的第一个参数为state，第二个参数为传递参数payLoad。

actions中的方法（methods）只能异步派遣（dispatch）mutations中的提交（commit）使用，方法里的第一个参数上下文（context）为当前 store 实例，第二个参数为传递的值。

getters相当于过滤器，过滤 state 中的数据，方法里的第一个参数是为state。

辅助函数形式使用需要用map数组引入，拓展三点（...）映射。

8. Vuex中的模块化-Module

8.1 为什么会有模块化？

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

这句话的意思是，如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护。由此，又有了Vuex的模块化。

8.2 模块化的简单应用

定义两个模块 user 和 setting
user中管理用户的状态 token
setting中管理应用的名称 name

const store  = new Vuex.Store({
  modules: {
    user: {
       state: {
         token: '12345'
       }
    },
    setting: {
      state: {
         name: 'Vuex实例'
      }
    }
  })

① 定义child-b组件，用原始方式分别显示用户的token和应用名称name

<template>
  <div>
      <div>用户token {{ $store.state.user.token }}</div>
      <div>网站名称 {{ $store.state.setting.name }}</div>
  </div>
</template>

请注意：此时要获取子模块的状态需要通过 $store.state.模块名称.属性名 来获取

② getters方式分别显示用户的token和应用名称name

const store = new Vuex.Store({
  getters: {
    token: (state) => {
      return state.user.token
    },
    name: (state) => {
      return state.setting.name
    }
  },
  modules: {
    // 放置子模块
    user: {
      state: {
        token: '123456'
      },
    setting: {
      state: {
        name: '刘建超'
      }
    }
  }
})

<template>
  <div>
      <div>用户token {{ token }}</div>
      <div>网站名称 {{ name }}</div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['token','name']),
  }
}
</script>

8.3 模块化中的命名空间

① 命名空间 namespaced

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。这句话的意思是刚才的user模块还是setting模块，它的 action、mutation 和 getter 其实并没有区分，都可以直接通过全局的方式调用。

如：user子模块中的 mutation 的updatedToken可以通过全局的方式调用。

const store = new Vuex.Store({
  modules: {
    // 放置子模块
    user: {
      state: {
        token: '123456'
      },
      mutations: {
        updatedToken(state) {
          state.token = '6789'
        }
      },
      actions: {}
    }
})

通过mapMutations调用

 methods: {
       ...mapMutations(['updateToken'])
  }
 <button @click="updateToken">修改token</button>

但是，如果我们想保证内部模块的高封闭性，我们可以采用namespaced来进行设置。

高封闭性？可以理解成一家人如果分家了，此时，你的爸妈可以随意的进出分给你的小家，你觉得自己没什么隐私了，我们可以给自己的房门加一道锁（命名空间 namespaced）,你的父母再也不能进出你的小家了。如：

const store = new Vuex.Store({
  modules: {
    // 放置子模块
    user: {
      // 加一道锁，使得全局不能访问子模块中的方法
      namespaced: true,
      state: {
        token: '123456'
      },
      mutations: {
        //  这里的state表示的是user的state
        updatedToken(state) {
          state.token = '6789'
        }
      },
      actions: {}
    }
})

② 使用带命名空间的模块 action/mutations

方案1：直接调用-带上模块的属性名路径

test () {
   this.$store.commit('user/updateToken') // 直接调用方法
}

方案2：辅助函数-带上模块的属性名路径

import { mapMutations } from 'vuex'; 
methods: {
       ...mapMutations(['user/updateToken']),
       // 这里相当于导入这个updateToken函数
       test () {
           this['user/updateToken']()
        // 在这里通过 this 的方式调用了updateToken 函数
        // 相当于对象中去获取属性值的两种方式，一种是通过对象.属性名的方式
        // 另一种是 对象['属性名']
       }
   }
  <button @click="test">修改token</button>

方案3： createNamespacedHelpers 创建基于某个命名空间辅助函数

import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')
export default {
    methods: {
        ...mapMutations(['updatedToken'])
    }
}
<button @click="updateToken">修改token2</button>