#yyds干货盘点#Vuex中的store

Posted 2023-03-14

每一个​​Vuex​​应用的核心就是store（仓库）。store 基本上就是一个容器，包含着应用中大部分的state（状态）。

​​Vuex​​和单纯的全局对象有以下两点不同：

• ​​Vuex​​ 的状态存储是响应式的。当 ​​Vue​​ 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
• 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 ​​mutation​​。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

如何创建Store

安装好​​Vuex​​后，我们就可以创建store了，如下所示：

const store = new Vuex.Store(...);

从上述代码可以知道，store 是​​Vuex.Store​​ 这个构造函数new出来的实例。在构造函数中可以传一个对象参数，这个参数可以包含5个对象：state、getters 、mutations 、actions 、mudules ，其中最基本的是state和mutations 。

示例：

我们可以在项目的 ​​src​​ 目录下新建一个​​store.js​​ 文件，在文件中引用vue和vuex：

import Vue from vue
import Vuex from vuex

Vue.use(Vuex) // 全局安装 Vuex

const store = new Vuex.Store(
    state: 
      count: 0
    ,
    mutations: 
      increment (state) 
        state.count++
      
    
)
export default store  // 将vuex实例暴露出去，以便其他的任何文件进行共享数据

一个完整的store结构

const store = new Vuex.Store(
  state: 
    // 存放状态
  ,
  getters: 
    // state的计算属性
  ,
  mutations: 
    // 更改state中状态的逻辑，同步操作
  ,
  actions: 
    // 提交mutation，异步操作
  ,
  // 如果将store分成一个个的模块的话，则需要用到modules。
   //然后在每一个module中写state, getters, mutations, actions等。
  modules: 
    a: moduleA,
    b: moduleB,
    // ...
  
);