vue 和vuex区别

### Vue与Vuex的主要区别

#### Vue的特点
Vue 是一种渐进式 JavaScript 框架，用于构建用户界面。核心库专注于视图层，既易于学习又功能强大，可以构建复杂的单页应用程序(SPA)[^2]。

- **组件化**: Vue 应用程序由一系列可组合的组件构成，这些组件具有自己的模板、逻辑和样式。
- **双向绑定**: 使用 `v-model` 实现表单输入和应用状态之间的自动同步。
- **指令系统**: 如 `v-if`, `v-for` 等简化DOM操作的语法糖。

<div id="app">
  <!-- 绑定数据 -->
  {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
  el: '#app',
  data() {
    return {message: 'Hello, world!'}
  }
})
</script>

#### Vuex的特点
作为专门为 Vue 设计的状态管理模式,Vuex 主要解决了多个组件共享同一份状态的需求，并提供了更加结构化的解决方案来处理全局状态管理[^1]。

- **单一状态源**: 整个应用只有一个 store 来保存所有的状态，使得调试更容易。
- **变更跟踪**: 所有的状态更改都需通过提交 mutation 进行显式的记录，这有助于维护历史版本并支持时间旅行调试工具。
- **异步动作分离**: Actions 被用来封装可能涉及网络请求或其他异步任务的操作，它们最终会触发 mutations 更新 state。

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++
    },
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    },
  },
})

// 在组件内使用 mapState 辅助函数映射store中的state到本地计算属性
import { mapState } from 'vuex'
export default {
  computed: mapState(['count'])
}