Vue 在其他js文件中引入store的疑惑

Question

vue项目，在js文件而不是.vue文件中，无法通过$store拿到vuex里面的数据，所以需要导入store(比如import store from '../store/index';)，然后代码中通过store.state.xxx来拿数据；

可我有一个不懂的地方就是，为啥在其他js文件中通过store.state.xxx改变的store，就是整个项目中挂载在Vue的$store上的store呢？

我以为应该像一个vue组件(比如tabbar组件)被其他父组件导入一样，这些父组件相互不影响的呀。。

我是看了这篇文章才有的疑问，可能问的有点憨憨，求大佬指教了！😂
https://www.jianshu.com/p/0ca...

Answer 1

vuex的核心就是store。vuex又被称为状态管理，store里面储存的着你的应用中大部分的状态(state)。Vuex中store里面存储的状态state 和单纯的全局对象有以下两点不同：

(1)Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

(2)你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

当store通过main.js挂载到全局上时，可以在所有vue实例(.vue文件)中通过 $store 或 this.$store 来获得对应的状态。

import store from './store'

new Vue({
  el: '#app',
  router,
  store,  // 全局挂载
  components: { App },
  template: '<App/>'
})

所有的.vue文件可以看做一个组件，也即vue实例，所以只要在main.js中挂载了store，就可以轻易的通过$store 或 this.$store 来获取。

但是js后缀的文件并非组件，无vue实例，所以此时要用store的话，就需要单独加载

import store from '../store'   // 这里的../store是指store/index.js
// store/index.js是包含若干小仓库和完整states、getter、mutation和action的总仓库

加载之后就可以通过store来引用对应的state。因为状态是全局的，它的改变，只有一种方法，那就是显式地提交 (commit) mutation。，所以使得store很方便的应用于全局，并且维护方便。

Answer 2

是因为import,它只是引入了一个模块的引用，详细参考这篇：https://zhuanlan.zhihu.com/p/...