详解vuex的简单使用

1 目录的配置

根据官方推荐在src目录里面创建store目录

2 创建store里面的文件

根据官方推荐创建 actions.js, getters.js,index.js, mutations.js, mutations-types.js, state.js

2.1 state.js

state.js: 是vuex的单一状态数，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。（用来管理所有vuex状态数据）

2.2 mutations-types.js 存取mutations相关的字符常量 (一些常量)

2.3 mutations.js （定义修改的操作）

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutations 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

2.4 getters.js 有时候我们需要从 store 中的 state 中派生出一些状态。

mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性

2.5 actions.js

Action 类似于 mutation，不同在于：

1. Action 提交的是 mutation，而不是直接变更状态。

2. Action 可以包含任意异步操作。

3. 在一个动作中多次改变mutation可以封装一个action

2.6 index.js入口

3 使用

3.1 在mian.js注册store

在main.js里面new的Vue的实例里面注册store

3.2 写入值，要在组件中引入mapMutations的语法糖

引入语法糖

在methods里面mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用

在需要的地方写入值

3.3获取值

获得vuex中的值，要在组件中引入mapGetters（mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性）

引入mapGetters

在computed计算属性里面使用对象展开运算符将 getters 混入 computed 对象中

拿到值

3.4 action存入值

在需要存入的地方使用

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Vue单页应用引用单独的样式文件的两种方式

基于js中的存储键值对以及注意事项介绍

angular4 共享服务在多个组件中数据通信的示例

以上就是详解vuex的简单使用的详细内容，更多请关注Gxl网其它相关文章！