vuex工作工作原理（写给自己看的笔记以加深自己的理解）
一、Vuex工作原理
首先我们先来了解下Vuex：
1、概念
在vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
2、何时使用？
多个组件需要共享数据时
现在开始进入vuex的世界！
当多组件需要共用一组数据时候 最好的做法就是使用Vuex
需要共享的数据存储在State中，里面可以存放许许多多的功用数据
从左侧Vue Components出发 调用 dispath函数 可传入两个参数 dispath('要调用的方法名',要传入的值)
调用dispatch之后 就来到了Action Action中一定有个与之对应的方法在这边触发 在这个方法里会调用commit函数 同时原封不动的把dispatch带过来的参数-------{ mutation('要调用的方法名',要传入的值) } ---------给到Mutation
在Mutation中一定会有个我们带过来的方法名 这里mutation的这个函数中 会拿到两个东西----->一个是所有state中存储的数据，一个就是我们一些传入进来的值 在这个函数中我们只需要写我们希望传入进来的值做怎样的操作（希望这个值做出怎样的改变）也就是最终写逻辑的地方
这里可能会疑惑 既然commit做的工作与dispath工作相同 为什么多此一举这一步？？？
下面来解答一下：
在Action中我们可以进行一些有条件的操作，比如我们传入的值需要从后端服务器获取，那么就必须走action， 又比如我们要使 点击一个按钮一个数字增加 当是奇数的时候不加 偶数增加 这个也是条件 ！就要走action这个逻辑。
如果我们只是简单的执行一个没有任何条件的动作 可以省去dispath走到action这一步。直接commit与Mutation对话！
说到这里我们 我们大概能明白Action、Mutation、State这一套工作流程就是Vuex的工作 他们由store统一管理 所以当我们去调用API的时候 要写为store.dispatch()、store.commit()
但是需要注意的是 我们要让所有的组件实例对象vc都能看的到store 因为这些方法不是存放在window上的。接下来我们去搭建一下vuex的工作环境。
二、搭建Vuex工作环境
1、第一步安装
npm i vuex
2、第二步使用vuex
在入口文件main.js中使用下vuex
先引入vuex
import vuex from 'vuex'
使用vuex
Vue.use(vuex)
完成这两步之后，我们就可以在vm中创建store配置项，如果不先完成以上两步，直接在vm中创建store配置项会报错！
在vm中：store:store 可以直接简写为store
到这里所有的组件实例对象上都多了个$store
写到这里最核心的内容来了。。。。store管理着Action、Mutation、State 还有dispatch和commit两个API
我需要去创建一个store来完成这一步！
3、创建store文件
创建：src/store/index.js
//引入vue核心库
import Vue from 'vue'
//引入vueX
import Vuex from 'vuex'
//应用插件
Vue.use(Vuex)
//准备actions对象--响应组件中用户的动作
const actions = {}
//准备mutatins对象--修改state中的数据
const mutations = {}
//准备state对象--保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
}) 创建好store文件后要去入口文件main.js中引入一下
这边写完之后可能会报一个错误 这是由于import引入文件引起的 报错的原因就是先引入了store 后使用了vuex 并且调换编写顺序也是不可行的 因为import会自动提升到最上方
解决方法：
在入口文件main.js中去引入vue。然后使用vuex 就可以解决这个问题
网友评论