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

volecat
  • 72

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...

回复
阅读 497
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很方便的应用于全局,并且维护方便。

你知道吗?

宣传栏