vuex介绍

  • state，驱动应用的数据源；相当于组件中的data
  • view，以声明方式将 state 映射到视图；相当于组件中的template
  • actions，响应在 view 上的用户输入导致的状态变化。相当于组件中的methods

image.png

安装

  1. vue add vuex
  2. 通过这种方式安装会自动配置相关信息
  3. npm install vuex --save
  4. 通过这种方式安装，要自己配置vuex的相关信息

使用

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
  2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

通过npm install vuex —save安装：

先main.js文件中导入并注册store

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import store from './store'
  5. Vue.config.productionTip = false
  7. new Vue({
  8.   // 为了在 Vue 组件中访问 this.$store property,你需要为 Vue 实例提供创建好的 store
  9.   store,
  10.   render: h => h(App)
  11. }).$mount('#app')

在创建一个.js文件实例化一个Store，并导出他

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  4. // 通过vue.use注册Vuex
  5. Vue.use(Vuex)
  7. // 实例化一个store对象
  8. export default new Vuex.Store({
  9.   // state类似于组件中的data，用来存放对象
  10.   // state中的对象只能通过mutations中的函数修改
  11.   state: {
  12.     count:0
  13.   },
  14.   // getters类似于组件中的computed对象，用来处理数据
  15.   getters: {
  16.   },
  17.   // mutations和actions类似于组件中的methods对象
  18.   // mutations中必须使用同步函数，mutations中的函数用于修改state中的对象
  19.   mutations: {
  20.     increment (state) {
  21.       state.count++
  22.     }
  23.   },
  24.   //  actions中的函数可以返回一个Promise，这也说明actions中可以使用异步函数的。
  25.   // actions中的函数不能直接修改state，需要调用mutations中的函数来修改。
  26.   // 通过commit调用mutations中的函数
  27.   actions: {
  28.   },
  29.   // 模块对象。每个模块相当于一个Store的实例化对象
  30.   modules: {
  31.   }
  32. })

获取数据，修改数据

获取数据
在组建方法中：this.$store.state.xxx
在标签中：$store.state.xxx或this.$store.state.xxx

  1. <template>
  2.   <div>
  3.     //获取数据时可以加this，也可以不加，通过$store.state.xxx获取store中的数据
  4.     <div>{{this.$store.state.count}}</div>
  5.     <div>{{$store.state.count}}</div>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   mounted(){
  12.     // 通过this.$store.commit的形式调用mutations中的increment函数修改state中的count对象
  13.     this.$store.commit('increment')
  14.     // 打印修改后的数据
  15.     console.log(this.$store.state.count)
  16.   }
  17. }
  18. </script>

State

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT(opens new window))”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则

在组件中获取vuex的state

  1. export default {
  2.   mounted(){
  3.     // 通过this.$store.commit的形式调用mutations中的increment函数修改state中的count对象
  4.     this.$store.commit('increment')
  5.     // 打印修改后的数据
  6.     console.log(this.$store.state.count)
  7.   }
  8. }

mapState辅助函数

通过辅助函数一次获取多个state中的对象

传入一个对象作为mapState参数

  1. // mapState时state的辅助函数
  2.   // 传入一个对象
  3.   computed:mapState({
  4.     // 这里可以使用箭头函数，通过函数将state中的对象返回给count
  5.     // 这样就可以在组件中通过count来显示state中的count对象的内容了
  6.     // 因为时响应式的所以数据会实时更新
  7.     count: function(state) {return state.count},
  9.     // 通过别名方式获取state中的对象
  10.     // 这里的'count' 等同于 `state => state.count`
  11.     Acount:'count',
  13.     // 为了能够使用 `this` 获取局部状态，必须使用常规函数
  14.     getLocalData(state){
  15.       return state.count + this.a
  16.     }
  17.   }),

传入一个数组作为mapState参数

  1. // 当映射的计算属性的名称与 state 的子节点名称相同时，可以给 mapState 传一个字符串数组
  2.   computed:mapState([
  3.     // 映射 this.count 为 store.state.count
  4.     'count'
  5.   ]),

对象展开符

  1. computed:{
  2.     // 通过对象展开符将mapState返回的对象展开
  3.     ...mapState({
  4.         count: state => state.count,
  5.         Acount:'count',
  6.         getLocalData(state){
  7.           return state.count + this.a
  8.       }
  9.     })
  10.   },

getters

  1. // 处理数据，和组件中的computed类似
  2. // 通过getters将数据处理并保存，在组件中通过this.$store.getters.xxx获取对应的处理结果
  3. // this.$store.getters.newName --> undefined123123(undefined是因为没有name)
  4. getters:{
  5.   //第二个参数是一个getters
  6.   newName(state,get){
  7.     // 可以调用另一个getters
  9.     // get 代表getters
  10.     return state.name+ "123" + get.newName2;
  11.   },
  12.   newName2(state) {
  13.     return "123";
  14.   }
  15. }

获取getters中的数据

  1. mounted(){
  2.     console.log(this.$store.getters.newName)
  3.   }

通过方法访问

你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。

  1. getters: {
  2.   getTodoById: function(state) {
  3.     return (id) =>{
  4.       // todos是一个数组
  5.       return     state.todos.find(todo => todo.id === id)
  6.     }
  7.   }
  8. }

使用

  1. mounted(){
  2.     this.$store.getters.getTodoById(2)
  3. }

mapGetters辅助函数

使用方法和mapState类似

  1. computed:{
  2.   // 起别名
  3.   //   ...mapGetters({
  4.   //   someohter:'newName',
  5.   // })
  7.   //直接映射
  8.   ...mapGetters([
  9.     'newName'
  10.   ])
  11. },

mutations

Mutation 必须是同步函数

接收参数

  1. mutations: {
  2.     // 在大多数情况下，载荷应该是一个对象，
  3.     increment (state,payload) {
  4.       state.count++;
  5.       console.log(payload);
  6.     }
  7.   },

传入参数

参数2可以是一个对像，也可以是多个参数

  1. mounted(){
  2.     this.$store.commit('increment',{"a":12,"b":21})
  3.   }


对象风格的提交方式

  3. mounted(){
  4.     this.$store.commit({
  5.       // type属性对应mutations中的方法
  6.       type:'increment',
  7.       //剩下的属性都是参数，全部会被放到payload对象中
  8.       amount: 10,
  9.       account:"hao123"
  10.     })
  11. }

Mutation 需遵守 Vue 的响应规则

既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

  1. 最好提前在你的 store 中初始化好所有所需属性。
  2. 当需要在对象上添加新属性时，你应该
  • 使用 Vue.set(obj, ‘newProp’, 123), 或者
  • 以新对象替换老对象。例如，利用对象展开运算符(opens new window)我们可以这样写：
    1. state.obj = { ...state.obj, newProp: 123 }

    使用常量替代 Mutation 事件类型

    1. export const SOME_MUTATION = 'SOME_MUTATION';
    2. export const mutations= {
    3. // 在大多数情况下，载荷应该是一个对象，
    4. increment (state,payload) {
    5.   state.count++;
    6.   console.log(payload);
    7.   console.log(state)
    8. }
    9. }
    在store的js文件中导入

在组件中提交 Mutation

mapMutations 辅助函数

  1. methods:{
  2.     ...mapMutations([
  3.       'increment'// 将 `this.increment()` 映射为 `this.$store.commit('increment')`
  4.     ]),
  5.     ...mapMutations({
  6.       // 别名
  7.       add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
  8.     })
  9.   }

使用

  1. mounted(){
  2.     this.increment();
  3.     this.add()
  4. }

action

可以在 action 内部执行异步操作

使用

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

  1. actions: {
  2.     // 这里的context相当于是store 
  3.     increment (context) {
  4.       //commit中的increment是mutations中的函数
  5.       context.commit('increment')
  6.     }
  7.   },

实践中，我们会经常用到 ES2015 的 参数解构(opens new window)来简化代码（特别是我们需要调用 commit 很多次的时候）：

  1. actions: {
  2.   // 通过解构获取到commit对象--》const {commit} = store
  3.   increment ({ commit }) {
  4.     commit('increment')
  5.   }
  6. }

触发action

  1. mounted(){
  2.     // 触发action中的方法
  3.     this.$store.dispatch('increment')
  4.   }

Actions 支持同样的载荷方式和对象方式进行分发

  2. mounted(){
  3.   // 以载荷形式分发
  4.     this.$store.dispatch('increment',{"a":123,"b":456})
  6.   // 以对象形式分发
  7.   this.$store.dispatch({
  8.     type: 'increment',
  9.     "a":123,
  10.     "b":456
  11.   })
  12. }

接收方式也是一样的

  1. actions: {
  2.     increment (context,payload) {
  3.       context.commit('increment',payload)
  4.     }
  5.   },


在组件中分发 Action

mapActions 辅助函数

  1. methods:{
  2.     ...mapActions ([
  3.       'increment',
  4.     ]),
  5.     ...mapActions ({
  6.       add:'increment',
  7.     })
  8.   },

store.dispatch

store.dispatch返回一个Promise
action中的函数也可以返回一个Promise

  1. actions: {
  2.   actionA ({ commit }) {
  3.     return new Promise((resolve, reject) => {
  4.       setTimeout(() => {
  5.         commit('someMutation')
  6.         resolve()
  7.       }, 1000)
  8.     })
  9.   }
  10. }
  12. store.dispatch('actionA')返回一个Promise

actions中的函数亦可以使用dispatch触发另一个action

  1. actions: {
  2.   // ...
  3.   actionB ({ dispatch, commit }) {
  4.     return dispatch('actionA').then(() => {
  5.       commit('someOtherMutation')
  6.     })
  7.   }
  8. }

使用async await处理异步函数

  1. actions: {
  2.   async actionA ({ commit }) {
  3.     commit('gotData', await getData())
  4.   },
  5.   async actionB ({ dispatch, commit }) {
  6.     await dispatch('actionA') // 等待 actionA 完成
  7.     commit('gotOtherData', await getOtherData())
  8.   }
  9. }

module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

  1. const moduleA = {
  2.   state: () => ({ ... }),
  3.   mutations: { ... },
  4.   actions: { ... },
  5.   getters: { ... }
  6. }
  8. const moduleB = {
  9.   state: () => ({ ... }),
  10.   mutations: { ... },
  11.   actions: { ... }
  12. }
  14. const store = new Vuex.Store({
  15.   modules: {
  16.     a: moduleA,
  17.     b: moduleB
  18.   }
  19. })
  21. store.state.a // -> moduleA 的状态
  22. store.state.b // -> moduleB 的状态