小QA学习前端系列之vuex

发表于

一个QA如何学习vuex

什么vuex

其实之前也学习过redux，虽然redux已经把我看得云里雾里的，里面的educer 应该如何拆分、action 应该怎么定义、dispatch 异步怎么做、Ajax 怎么使用、middleware 什么时候需要用、enhancer 干什么的、高阶函数怎么这么多 等等一系列问题，就算是看懂了，放上半年又全还给度娘了，相反vuex却让我记忆犹新，vuex的api 我花半天时间，就已经理解的很透彻了，跟着getting started，已经可以把demo中todo-list搞定了。说了这么多，那么vuex到底是什么，vuex和redux一样都是用来管理状态的，只不过vuex只能用在vue项目中，redux则没有限制，如果你想在react项目使用类似vuex的框架，最近有一个MobX的框架可以值得一试，虽然我也没看，但是大神推荐了，应该没错。

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

以上是官方的解释，很清晰明了，想更进一步的话，我们需要知道vuex是基于flux架构，同时也吸收redux的一些优点，而redux又是基于flux的改进:

把store和Dispatcher合并,结构更加简单清晰
新增state角色，代表每个时间点store对应的值，对状态的管理更加明确

Redux数据流的顺序是:

View调用store.dispatch发起Action->store接受Action(action传入reducer函数,reducer函数返回一个新的state)->通知store.subscribe订阅的重新渲染函数

Flux数据流的顺序是:

View发起Action->Action传递到Dispatcher->Dispatcher将通知Store->Store的状态改变通知View进行改变
而Vuex是专门为Vue设计的状态管理框架,
同样基于Flux架构，并吸收了Redux的优点

Vuex相对于Redux的不同点有:

改进了Redux中的Action和Reducer函数，以mutations变化函数取代Reducer，
无需switch,只需在对应的mutation函数里改变state值即可

由于Vue自动重新渲染的特性，无需订阅重新渲染函数，只要生成新的State即可

Vuex数据流的顺序是:

View调用store.commit提交对应的请求到Store中对应的mutation函数->store改变(vue检测到数据变化自动渲染)

vuex的核心概念

Vuex 中 Store 的模板化定义如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
  },
  actions: {
  },
  mutations: {
  },
  getters: {
  },  
  modules: {
    
  }
})
export default store
  • State
  • Getter
  • Mutation
  • Action
  • Module

    state

    Vuex就是提供一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data（后面讲到的actions和mutations对应于methods）。
    state: state 定义了应用状态的数据结构，同样可以在这里设置默认的初始状态。

响应书存储：state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。（这里“状态”=“数据”），也就是是说数据和视图是同步的。
例如:

1
2
3
4
state: {
  projects: [],
  userProfile: {}
}

在 Vue 组件中获得 Vuex 状态的几种方法

通用方法:全局的放vuex，局部的放在component的data里

Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：

1
2
3
4
5
6
7
8
9
10
11
12
const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现：

1
2
3
4
5
6
7
8
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

mapState

mapState的作用是把全局的 state 和 getters 映射到当前组件的 computed 计算属性中，this.$store.state。

使用示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 import {mapState} from 'vuex' 
 export default {
  computer :
  mapState({
   count: state => state.count,
    // 方法一 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
    // 方法二 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    },
     // 映射 this.count 为 store.state.count
  'count'
  })
}
对象展开运算符
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'
Vue.use(Vuex)
const state = {
    userInfo: { phone: 111 }, //用户信息
    orderList: [{ orderno: '1111' }], //订单列表
    orderDetail: null, //订单产品详情
    login: false, //是否登录
}
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
})
computed: {
            ...mapState([
                'orderList',
                'login'
            ]),
        },   
        mounted(){  
            console.log(typeof orderList); ==>undefind
            console.log(typeof this.orderList)==>object
        }

getter

一句话 getter就是用来进行数据过滤的，然后把过滤后的数据，共享给所有component。

所以getters是store的计算属性

getters过滤条件必须是bollean值.根据bolean的条件返回具体数据对象。

🌰🌰🌰🌰🌰🌰

定义：我们可以在store中定义getters，第一个参数是state

1
2
3
4
5
6
7
8
9
10
11
12
13
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

传参：定义的Getters会暴露为store.getters对象，也可以接受其他的getters作为第二个参数；

1
2
3
4
5
6
7
8
getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}
store.getters.doneTodosCount // -> 1

调用

1
2
3
4
5
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

通过mapGetters调用
mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性中，用法和mapState类似

1
2
3
4
5
6
7
8
9
10
11
import { mapGetters } from 'vuex'
computed: {
   // 使用对象展开运算符将 getters 混入 computed 对象中
    ...mapGetters([
    'doneTodosCount',
    'anotherGetter',])}
 //给getter属性换名字
  mapGetters({
 // 映射 this.doneCount 为 store.getters.doneTodosCount
  doneCount: 'doneTodosCount'
})

Mutation

在Vuex中store数据改变的唯一方法就是mutation

mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。

重要的原则就是要记住 mutation 必须是同步函数

如何使用

  • mutation结构

每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler)，也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件，当触发响应类型的时候调用handker()，调用type的时候需要用到store.commit方法。

1
2
3
4
5
6
7
8
9
10
const store = new Vuex.Store({
    state: {
        count: 1
        },
    mutations: {
    increment (state) {      //注册事件，type:increment，handler第一个参数是state；
         // 变更状态
       state.count++}}})
       
    store.commit('increment')   //调用type，触发handler（state）
  • 载荷（payload)

简单的理解就是往handler(stage)中传参handler(stage,pryload)；一般是个对象。

1
2
3
4
mutations: {
increment (state, n) {
    state.count += n}}
store.commit('increment', 10)

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：

1
2
3
4
5
6
7
8
9
10
// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})
  • 对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

1
2
3
4
store.commit({
  type: 'increment',
  amount: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

1
2
3
4
5
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
  • Mutation 需遵守 Vue 的响应规则

最好提前在你的 store 中初始化好所有所需属性。

当需要在对象上添加新属性时，你应该

使用 Vue.set(obj, ‘newProp’, 123), 或者以新对象替换老对象。例如，利用 stage-3 的对象展开运算符我们可以这样写：

1
state.obj = { ...state.obj, newProp: 123 }
  • 使用常量替代 Mutation 事件类型

将常量放在单独的文件中，方便协作开发。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})
  • 在组件中提交 Mutation

提交可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { mapMutations } from 'vuex'
export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

action

前面我们讲了mutation中是存放处理数据的方法的集合，我们使用的时候需要commit。但是commit是同步函数，而且只能是同步执行。

所以action出现了。在actions中提交mutation，并且可以包含任何的异步操作。actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据（但是还是通过mutation来操作，因为只有它能操作）

定义actions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const store = new Vuex.Store({//创建store实例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         },
         sub(state){
    state.count--;
  }
          },
      actions: {         //只是提交`commit`了`mutations`里面的方法。
         increment (context) {
          context.commit('increment')
   },
   subplus({commit}){
    commit('sub');
  }
 }
    })
 
 Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。
  一般我们会简写成这样
  actions: {
   increment ({ commit }) {
         commit('increment')
      },
subplus({commit}){
    commit('sub')
  }
         }

分发 Action

Action 通过 store.dispatch 方法触发：

store.dispatch('increment')

乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：

1
2
3
4
5
6
7
actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

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

1
2
3
4
// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发

1
2
3
4
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

  • 在组件中分发 Action
    你在组件中使用 this.$store.dispatch(‘xxx’) 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    import { mapActions } from 'vuex'
    export default {
      // ...
      methods: {
        ...mapActions([
          'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
          // `mapActions` 也支持载荷：
          'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
        ]),
        ...mapActions({
          add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
        })
      }
    }

Module

背景：在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。

module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

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

模块的局部状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const moduleA = {
  state: { count: 0 },
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态
      state.count++
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
}

对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState

1
2
3
4
5
6
7
8
9
10
const moduleA = {
  // ...
  actions: {
    incrementIfOddOnRootSum ({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：

1
2
3
4
5
6
7
8
const moduleA = {
  // ...
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  }
}

命名空间

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为命名空间模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,
      // 模块内容（module assets）
      state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },
      // 嵌套模块
      modules: {
        // 继承父模块的命名空间
        myPage: {
          state: { ... },
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },
        // 进一步嵌套命名空间
        posts: {
          namespaced: true,
          state: { ... },
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})

带命名空间的绑定函数

当使用 mapState, mapGetters, mapActions 和 mapMutations 这些函数来绑定命名空间模块时，写起来可能比较繁琐：

1
2
3
4
5
6
7
8
9
10
11
12
computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},
methods: {
  ...mapActions([
    'some/nested/module/foo',
    'some/nested/module/bar'
  ])
}

对于这种情况，你可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。于是上面的例子可以简化为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo',
    'bar'
  ])
}
```而且，你可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数：

import { createNamespacedHelpers } from ‘vuex’

const { mapState, mapActions } = createNamespacedHelpers(‘some/nested/module’)

export default {
computed: {
// 在 some/nested/module 中查找
…mapState({
a: state => state.a,
b: state => state.b
})
},
methods: {
// 在 some/nested/module 中查找
…mapActions([
‘foo’,
‘bar’
])
}
}

```

以上便是我2天来学习vuex的心得，大部分参考的是官方的文档，不得不说vuex的文档比redux文档容易理解多，接下来我会把官方的列子购物车玩一下，然后自己在写一个todo-list,vue2 还是大略的过了一遍，还是要写个小项目熟悉框架，一个QA在前端的路途上越走越远，希望学到前端知识能够帮我在测试和自动化的道路上有所突破。