Vuex 搭建过程 以及项目结构

Vuex 搭建过程 以及项目结构

概念：Vuex是专为Vue.js应用程序开发的状态管理模式（提供了可公用的参数），主要采用的是集中式存储管理应用的所有组件状态 （响应式）

主要的应用场景

​ 多个视图依赖于同一状态

​ 来自不同视图的行为需要变更同一状态

• state 数据仓库，驱动应用的数据源
• mutations 提供修改数据仓库的方法 （同步）
• getters 提供获取仓库内容的方法
• actions 提供了异步操作，基于mutations来进行操作

如果要在项目中使用Vuex的话，在当前目录下安装vueX cnpm install vuex --save

1. 在main.js中引入vuex import Vuex from ‘vuex’
2. 在项目中创建一个store文件夹
   1. index.js 是vuex的核心文件，这里赋值vuex对象的配置
   2. state.js 仓库的配置，当前应用需要共享的数据都可以在这里声明
   3. mutations.js 修改具体仓库数据的方法。
   4. getters.js 在获取数据的基础上，进行进一步的修改
   5. actions.js 这里存放也是方法，主要做的是异步操作

如果要在页面中需要展示 state 里面值时 {{this.$store.state.【具体变量名】}}

在vuex 项目中，需要通过commit 方法来提交mutations的操作。actions 方法则需要使用dispatch这个方法来进行分发