对vuex中store和$store的区别说明

对vuex中store和$store的区别说明

在使用Vue框架开发应用时，如果需要进行状态管理，通常使用Vuex库。在使用Vuex时，我们经常会看到store和$store这两个概念，这两者之间有什么区别呢？

store

store是Vuex的核心概念，它是一个数据存储的中心，用于管理着应用程序中的全部响应式状态。store中的状态是响应式的，这意味着当我们修改store中的状态时，所有的依赖于该状态的组件都会自动更新。

在Vue组件中，我们可以通过$store访问store中的数据和方法。但store并不是Vue实例的一部分，它是一个独立的对象，可以在Vue实例中注入，或者在Vue根实例中使用。

以下是一个示例，在Vue实例中注入store：

import Vue from "vue";
import Vuex from "vuex";
import store from "./store";

Vue.use(Vuex);

new Vue({
  store,
  // ...
});

store中的状态可以通过commit()方法来修改，例如：

store.commit('increment')

$store

$store是Vuex提供的一个全局属性，它指向的是store的实例。$store包含了store中的全部数据、方法。在组件中使用$store的方式，与在Vue实例中使用store的方式类似。

以下是一个示例：

<template>
  <div>
    <p>count: {{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">increment</button>
  </div>
</template>

在这个示例中，我们通过$store访问了state和commit()方法，实现了对store中状态的修改。

总的来说，store和$store都是Vuex中重要的概念，store是Vuex应用中存储状态的中心，$store是store的实例，用于在组件中访问和修改store中的状态。