vuex总结

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

1、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中

 

2、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

3、Mutation：vuex中的‘method’

不直接在state中改变状态是由于统一使用mutation来改变能够更好的追踪到状态的变化

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

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

Mutation必须是同步的函数

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

4、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来处理更加复杂的异步流程

表单中的双向绑定

　　假设表单中绑定的是在计算属性返回的属于vuex store的对象，用户输入的时候就会试图去直接改变vuex中的状态，而通常不能直接修改vuex中的状态

　　方法一：须要经过mutation去修改：给 <input> 中绑定 value，而后侦听 input 或者 change事件

　　

<input :value="message" @input="updateMessage">
// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}
//下面是 mutation 函数：

// ...
mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}

 

　　方法二：在计算属性的set中调用mutation来改变当前值，并在mutation中取得新的值进行赋值

　　

<input v-model="message">
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}