Vuex详解，详细讲解一下Vuex

2023-07-26 165

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vuex详解，详细讲解一下Vuex

一、什么是vuex，为什么要用它

vuex是一个专门为vue开发的状态管理工具，它采用集中式存储管理应用的所有组件的状态，其核心是state。 vuex就是把组件共享状态抽取出来以一个全局单例模式管理，把共享的数据函数放进vuex中，任何组件都可以进行使用。

二、vuex中有什么

state：存放状态数据的地方，其中数据是响应式的，数据改变对应组件的数据也会跟新改变，禁止直接改变state中的数据否则数据无法被调试工具监测。

getter:可理解为store的计算属性，能读取state中的数据。

mutations：装着处理数据逻辑方法的集合体，是该改变state中数据的唯一方法，修改数据是同步的。

actions：提交mutations修改数据，与mutations功能类似，但修改数据是异步的。

modules：当store过于臃肿时，可使用modules将store分割成模块，每个模块中都有自己的state、getter、mutations、actions

三、安装vuex

方法一：

在脚手架创建项目时勾选vuex的选项系统会自动创建

方法二：npm 或Yarn安装

npm install vuex@next --save

yarn add vuex@next --save

四、配置

如果是采用脚手架方式进行创建，可以忽略此步骤

新建store文件创建index.js，进行如下配置，在main.js中进行引入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  //数据，相当于data
  state: {
  },
//相当于vuex的计算属性
  getters: {
  },
  //里面定义方法，操作state方发
  mutations: {
  },
  // 操作异步操作mutation
  actions: {
  },
  modules: {
  },
})

main.js中

五、核心概念

vuex中一共有五个状态 State Getters Mutations Actions Modules 下面进行详细讲解

5.1 state

存放状态数据的地方，其中数据是响应式的，数据改变对应组件的数据也会跟新改变，禁止直接改变state中的数据否则数据无法被调试工具监测。

在vuex中state中定义数据，可以在任何组件中进行调用

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  //数据，相当于data
  state: {
    name:"张三",
    age:12,
    count:0
  },
})