详解vuex的简单使用

文章标题：Vuex详解：轻松上手，长沙网络推广带你

一、目录配置

在src目录中，我们按照官方推荐的方式创建一个store目录，作为Vuex的根目录。

二、创建Store文件

在store目录下，我们依次创建以下几个文件：actions.js、getters.js、index.js、mutations.js、mutations-types.js以及state.js。接下来，我们将逐一这些文件的作用和内容。

2.1 state.js

state.js是Vuex的核心文件之一，它定义了单一状态树，包含了应用的所有层级状态。这个状态树作为“唯一数据源(SSOT)”存在，意味着每个应用只有一个store实例。通过这种设计，我们可以轻松地定位到任何一个特定的状态片段，并在调试过程中获取整个应用状态的快照。这里主要用来管理所有Vuex状态数据。

示例代码：

```javascript

// state.js

const state = {

// 城市状态

city: {},

cityList: [],

fullScreen: true,

palyer: false

};

export default state;

```

2.2 mutations-types.js

mutations-types.js文件用于定义与mutations相关的字符常量。这些常量用于标识不同的状态变更事件。

示例代码：

```javascript

// mutations-types.js

export const SET_CITY = 'SET_CITY';

export const SET_PLAY = 'SET_PLAY';

export const SET_FULL_SCREEN = 'SET_FULL_SCREEN';

export const SET_CITY_LIST = 'SET_CITY_LIST';

```

2.3 mutations.js

mutations.js文件定义了如何修改Vuex的状态。唯一修改Vuex状态的方法是提交mutation。每个mutation都有一个事件类型和回调函数。事件类型用于标识这个mutation，而回调函数则用于执行状态变更。回调函数接受state作为第一个参数。

示例代码：

```javascript

// mutations.js

import { SET_CITY, SET_PLAY, SET_FULL_SCREEN, SET_CITY_LIST } from './mutation-types'; // 导入mutation类型常量

const mutations = {

[SET_CITY](state, city) { // 设置城市状态

state.city = city; // 更新城市状态数据

},

一、mapGetters 辅助函数

在 Vuex 中，我们经常需要从 store 中的 state 派生出一些状态。对于这些需求，mapGetters 辅助函数应运而生。它的作用非常简单，就是将 store 中的 getters 映射为局部计算属性。这样，我们可以轻松地在组件中访问这些派生状态。

例如，我们有时会对 state 里面的属性进行映射，如下：

`city`：通过映射，我们可以直接通过计算属性获取到 state 中的 city。

`cityList`：同理，可以直接获取到 state 中的 cityList。

`fullScreen`：表示全屏状态，通过映射可以直接获取。

`palyer`：表示当前玩家状态，通过映射获取。

二、actions.js 文件

在 Vuex 中，actions 类似于 mutations，但两者有着明显的不同。

actions 提交的是 mutations，而不是直接变更状态。这意味着 actions 是间接地改变 state，通过触发 mutations 来实现。

actions 可以包含任意异步操作。这是 mutations 无法做到的，因为 mutations 必须是同步的。

在实际应用中，我们有时需要在一次 action 中多次改变不同的 mutations。这时，封装一个 action 就能很好地解决这个问题。例如，在 `selectList` 这个 action 中，我们提交了三个不同的 mutations：设置城市列表、设置播放状态和设置全屏状态。

三、index.js 入口文件

Vuex Store 的构建与使用

我们来构建我们的 Vuex Store。我们首先从 actions、getters、mutations 和 state 中导入必要的模块，然后根据环境决定是否启用严格的模式以及是否添加日志插件。

```javascript

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex); // 使用 Vuex 插件

import actions from './actions'; // 导入 actions

import getters from './getter'; // 导入 getters

import state from './state'; // 导入 state

import mutations from './mutations'; // 导入 mutations

import createdLogger from 'vuex/dist/logger'; // 导入日志插件

const debug = process.env.NODE_ENV !== 'production'; // 判断是否为非生产环境

export default new Vuex.Store({

actions, // 注册 actions

getters, // 注册 getters

state, // 注册 state

mutations, // 注册 mutations

strict: debug, // 开启严格模式仅在开发环境

plugins: debug ? [createdLogger()] : [] // 根据环境决定是否添加日志插件

});

```

在 main.js 中注册 Vuex Store

在你的 Vue 实例中注册这个 Vuex Store，使得你的应用能够访问和使用它。这个过程相当直接：

```javascript

import Vue from 'vue'; // 引入 Vue 库本身（未提及部分省略）...

import store from './store'; // 引入我们刚刚创建的 Vuex Store 实例...Vue.prototype.$store = store; // 将 store 挂载到全局的 Vue 实例上...new Vue({store}).$mount('app'); // 在创建 Vue 实例时传入 store 选项...在组件中使用 this.$store 可以访问到 store 实例中的属性和方法。注意使用 this.$store 需要确保组件已经挂载到 DOM 上。``` 使用 mapMutations、mapGetters 和 mapActions 进行操作与获取数据在组件中，我们可以使用辅助函数 `mapMutations`、`mapGetters` 和 `mapActions` 来简化在组件中调用 Vuex store 的操作。这些辅助函数使得我们在组件内部可以更方便地调用 store 中的方法或获取数据。 使用 mapMutations 来写入值在组件中引入 `mapMutations`：```javascriptimport { mapMutations } from 'vuex';```然后，在组件的 methods 中使用 `mapMutations` 将组件的 methods 映射为 store 的 mutations 方法调用。例如：```javascript...mapMutations({setCity: 'SET_CITY'})...```接着，在组件中的需要写入值的地方调用这个映射的方法：```javascriptthis.setCity(city);``` 使用 mapGetters 获取值在组件中引入 `mapGetters`：```javascriptimport { mapGetters } from 'vuex';```然后，在组件的 computed 属性中使用 `mapGetters` 将 store 中的 getters 映射为局部计算属性。例如：```javascriptcomputed: {...mapGetters([ 'city', 'cityList', 'player', 'fullScreen' ])}...```在组件中直接使用这些计算属性来获取值：```javascriptcreated() { console.log(this.city); console.log(this.cityList[1]); console.log(this.player); console.log(this.fullScreen); }``` 使用 mapActions 进行 action 操作在组件中引入 `mapActions`：```javascriptimport { mapActions } from 'vuex';```然后，使用 `mapActions` 将组件的方法映射为 store 的 actions 方法调用。例如：```javascript...mapActions(['selectList'])...```在需要执行 action 的地方调用这个方法：```javascriptthis.selectList({ list: this.citys, index: 1 });```至此，你已经掌握了在 Vue 应用中使用 Vuex 进行状态管理的基本流程和方法。这些辅助函数简化了我们在组件中对 Vuex store 的操作，使得代码更加简洁和易于理解。希望这些内容能对你的学习有所帮助！记得多多支持狼蚁 SEO，一起进步！请忽略最后的 `cambrian.render('body')` 这一行代码，因为它似乎与上下文无关。