Vuex 基本使用

最新推荐文章于 2024-03-22 12:19:16 发布

Dark_programmer

最新推荐文章于 2024-03-22 12:19:16 发布

阅读量659

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Dark_programmer/article/details/104473376

版权

vue 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

Vuex

一、什么是Vuex?

这里给一个 Vuex的传送门 Vuex

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
通俗解释：是一种最好的、非父子组件传值的一种方案

其实所谓的Vuex就是一个公共的内存对象，它把所有组件需要共有的状态放到了一个公共的内存空间里.并且给每一个状态做了一个数据劫持( 给每一个状态都添加了getter和setter )

二、 Vuex的使用流程

2.1 安装

npm install vuex --save
or
yarn add vuex -S

2.2 引入插件

import Vuex from 'vuex'

2.3 使用Vuex

Vue.use(Vuex)

2.4 创建公共的内存对象

var store= new Vuex.Store({})

2.5、将vuex导出，并挂载到vue身上

new Vue({
	store
})

以上这些，是自己手动搭建项目使用vuex的步骤。当然，有更简单的步骤来使用vuex，官方给我们推荐了一个脚手架 @vue/cli，至于这个脚手架的使用方法，咱们也是有一个简单的教程在的 @vue/cli
当使用这个脚手架进行搭建项目，会自动帮我们配置好很多东西，用到的用不到的都已经配置完成。

三、Vue中常用的配置项

state ：存储公共的状态
mutation ：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
action ：可以包含任意异步操作,并且是通过mutations来修改数据
modules ：公共状态的私有化
getters ：公共状态的计算属性（等价于computed，依赖于state里的状态）

四、Vuex的使用

接下来，简单的用代码演示一下使用
App.vue

<template>
  <div id="app">
    <One></One> 
  </div>
</template>

<script>
import One from "./components/One"; 
export default {
  components: {
    One
  }
};
</script>

状态管理集中在store里
store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    num: 10
  },
  mutations: {},
  actions: {},
  modules: {}
});

在组件里如何使用,如下
One.vue

<template>
  <div>
    <h1>
      page one
    </h1>
    <p>
      {{ this.$store.state.num }}
    </p>
  </div>
</template>

效果如图:
在这里插入图片描述
那么，如何能够更好的修改state里的数据呢？

由官网所示的流程图可知，需要调用Action里的方法，在调用Mutations里的方法进行修改state里的数据。接下来，我们用代码进行详细的演示
One.vue

 <button @click="handleChange(1)">click me +1</button>

先添加一个按钮，来触发相应时间

methods: {
    handleChange(params) {
      this.$store.dispatch("handleActionChange", params);
    }
  }

这里才是组件修改vuex里数据的操作，通过this.$store.dispatch()来触发actions里的方法。dispatch()有两个参数

action里包含的方法名
需要向action对应方法里传递的参数

接下来就是对于数据修改的具体业务逻辑
store/index.js

mutations: {
    handleMutationsChange(state, params) {
      state.num += params;
    }
  },
  actions: {
    handleActionChange(context, params) {
      context.commit("handleMutationsChange", params);
    }
  }

之前在One.vue组件里，触发了actions里的一个方法并传递了一个参数，在actions里的方法，均默认有同一个参数content,第二个参数就是组件里传递过来的数据，content其内包含的属性如下：
在这里插入图片描述
需要注意的是，actions里的方法并不可以直接修改state里的数据，而是需要commit来触发Mutations里的方法