vuex实现及简略解析(小结)

Vuex实现及简略解析

Vuex是一个专为Vue.js设计的状态管理库，他采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在大型的Vue.js应用程序中，多个组件之间共享同一状态，直接进行状态传递会比较麻烦。在这种情况下，我们可以使用Vuex。本文详细介绍了Vuex的实现和简略的解析。

Vuex简单介绍

Vuex提供了一个集中式存储管理应用的所有组件的状态的机制。包括：状态（state）、变更（mutations）、行为（actions）、获取器（getters）这四个部分。Vuex 属于基于状态管理模式的设计，视图和状态是分开了的，它们之间的复杂关系都被交给了 Vuex 来管理。一个重要的点就是：状态的改变一定是发生在 Mutation 函数中，每当一个 Action 被触发时，都会间接地导致提交 Mutations 的过程。

几种常见的状态管理模式

Vue.js中我们经常使用以下几种状态管理模式：

Props & $emit：@click“新增”按钮 --“新增”是一个父组件，并可以通过$emit来向子组件传值。这种状态传递模式适用于组件通信中父子关系单向的情况。
Event Bus：适用于复杂的组件通信中，多个兄弟之间、跨多层嵌套组件直接的情况。
Vuex：适用于中大型SPA应用中的状态管理。

Vuex的实现

state

Vuex的state是给Vuex用来存状态的，它类似于一个全局变量，定义在src/store/index.js，并在Vue实例中作为计算属性引用。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

getter

Vuex的getter顾名思义就是用来获取已经在Vuex存储的状态的。可以将state值通过getter进行计算，返回一个新的值。实现:getter相当于 store 中的计算属性(commit/mutations 其实是 store 的 methods) getter可以理解为是 store 的计算属性。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, done: true },
      { id: 2, done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }
})

mutation

Vuex的mutation是唯一管理状态的途径，需要注册一个函数来操作状态。mutation是Vuex中用于改变状态的唯一途径。通过提交mutation来进行操作。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    add (state, n) {
      return (state.count += n)
    },
    addOne (state) {
      return (state.count += 1)
    },
    minus (state, n) {
      return (state.count -= n)
    }
  }
})

action

Vuex的action主要是为了方便异步操作，将异步操作提交给mutation，并提供了跟踪异步操作状态的方法。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    add (state, n) {
      return (state.count += n)
    },
  },
  actions: {
    actionAdd ({commit}, payload) {
      setTimeout(() => {
        commit('add', payload)
      }, 1000)
    }
  }
})

简略解析

在Vuex中，存在以下几种部分：state：我们需要管理的状态，驱动应用的数据源；mutations：修改状态的事件处理器；getters：从state中获取数据的计算属性；actions：异步处理逻辑。

当状态state变化时，视图响应函数对应的视图也会自动更新。

示例

示例1：count

定义state

export default {
  state: {
    count: 0
  }
}

定义mutations

export default {
  mutations: {
    increment (state) {
      state.count++
    },
    decrement (state) {
      state.count--
    }
  }
}

定义actions

export default {
  actions: {
    increment ({ commit }) {
      commit('increment')
    },
    decrement ({ commit }) {
      commit('decrement')
    },
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
}

定义getters

export default {
  getters: {
    evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
  }
}

示例2：todos

定义state

export default {
  state: {
    todos: [
      { id: 1, text: 'vue.js', done: true },
      { id: 2, text: 'react.js', done: false },
      { id: 3, text: 'angular.js', done: false }
    ]
  }
}

定义mutations

export default {
  mutations: {
    addTodo (state, text) {
      state.todos.push({
        id: state.todos.length + 1,
        text,
        done: false
      })
    },
    toggleTodo (state, todo) {
      todo.done = !todo.done
    }
  }
}

定义actions

export default {
  actions: {
    addTodo ({ commit }, text) {
      commit('addTodo', text)
    },
    toggleTodo ({ commit }, todo) {
      commit('toggleTodo', todo)
    }
  }
}

定义getters

export default {
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    undoneTodos: state => {
      return state.todos.filter(todo => !todo.done)
    }
  }
}

以上就是对Vuex实现及简略解析的详细攻略，希望对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vuex实现及简略解析(小结) - Python技术站