天天看点

vue 在js 文件中使用store_Vue 在其他js文件中引入store的疑惑

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: ''

})

所有的.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很方便的应用于全局,并且维护方便。