vuex总结

Posted 2022-03-11 wyongz

Vuex是通过创建一个store的实例并配置相应的配置项来管理公共状态的

一、State：vuex中的‘data’

组 件中引入vuex中的store实例后通过store.state.属性来访问vuex中统一管理的数据，组件中从vuex中读取状态最简单的方法是在计算属性中，这样vuex中的状态变化的时候计算属性就会重新求取计算属性，并更新dom

使用store中的state问题一：每个组件使用的时候都需要引入store，

解决：通过根实例中注册store选项，该store实例就会注入到根组件下的所有子组件，子组件中通过this.$store访问

问题二：当一个组件需要多个状态时需要定义多个计算属性，很繁琐，

解决：可以使用辅助函数mapState来统一导入

// 在单独构建的版本中辅助函数为 Vuex.mapState

import  mapState  from ‘vuex‘

 

export default 

  // ...

  computed: mapState(

    // 箭头函数可使代码更简练

    count: state => state.count,

 

    // 传字符串参数 ‘count‘ 等同于 `state => state.count`

    countAlias: ‘count‘,

 

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数

    countPlusLocalState (state) 

      return state.count + this.localCount

    

  )



当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed: mapState([

  // 映射 this.count 为 store.state.count

  ‘count‘

])

　　

问题三：上述能整体引入属性了，但是没有办法将它与局部计算属性混合使用

解决：使用对象展开运算符，将上边的mapState前边加上…，在写其他的计算属性就可以混合使用了

computed: 

  localComputed ()  /* ... */ ,

  // 使用对象展开运算符将此对象混入到外部对象中

  ...mapState(

    // ...

  )

注意：虽然vuex方便管理状态，但是没有必要将所有的都放入vuex中，那样会造成代码冗长不直观，可以把需要公用的状态放入vuex中

 

二、Getter：vuex中的‘computed’

通过store中的state派生一些状态的时候可以使用getter，相当于组件中的computed，getter中接受state作为第一个参数

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)

    

  

)

 

//Getter 也可以接受其他 getter 作为第二个参数

getters: 

  // ...

  doneTodosCount: (state, getters) => 

    return getters.doneTodos.length

  



store.getters.doneTodosCount // -> 1

访问方式：

属性访问：将store放入全局组件中后可以通过this.$store.getters.doneTodosCount来访问store中的计算属性

方法访问：通过让 getter 返回一个函数，来实现给 getter 传参

getters: 

  // ...

  getTodoById: (state) => (id) => 

    return state.todos.find(todo => todo.id === id)

  



store.getters.getTodoById(2) // ->  id: 2, text: ‘...‘, done: false 

改善：getter中也会出现类似state中的问题，vuex同样提供了辅助函数mapGetter

三、Mutation：vuex中的‘method’

不直接在state中改变状态是因为统一使用mutation来改变可以更好的追踪到状态的变化

组建中通过store.commit(vue中的方法名)来调用vuex统一管理的方法

Mutation中的方法中第一个是state，第二个可以加入形参，在访问的时候commit中第二个放入实参

Mutation必须是同步的函数

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

四、Action：由于mutation只能是同步的函数所以需要action来执行异步的函数

Action 提交的是 mutation，而不是直接变更状态

const store = new Vuex.Store(

  state: 

    count: 0

  ,

  mutations: 

    increment (state) 

      state.count++

    

  ,

  actions: 

    increment (context) 

      context.commit(‘increment‘)

    

  

)

　　

你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters

 

你在组件中使用 this.$store.dispatch(‘xxx‘) 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）

Action可以通过promise来组合多个action来处理更加复杂的异步流程