vuex介绍

一、vuex是vue组件状态管理工具

二、vuex的安装与使用

1、npm安装

npm install vuex --save-dev

2、配置

如果采用脚手架方式进行创建，无需任何操作，可以忽略此步骤

新建store文件->index.js，进行如下配置，在mian.js中进行引入

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

main.js中

三、核心概念

vuex中一共有五个状态 State  Getter  Mutation   Action   Module  下面进行详细讲解

 1、state

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data

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

调用

<p>{{$store.state.属性名}}</p>

2、Getter

类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据

<div>{{$store.getters.自定义方法名}}</div>

getters:{
自定义方法名（）{
return 代码
}
}

3、mutations

是唯一修改state数据入口，想要修改state数据必须使用mutations

mutations：{
自定义方法名（state）{
执行代码
}
}

this.$store.commit('自定义方法名',要传递的参数）

4、actions

Action和Mutation相似，Mutation 不能进行异步操作，若要进行异步操作，就得使用Action

actions:{
自定义方法名（）{
//异步请求，一般情况下请求后台数据。
}
}

 在组件中使用：

this.$store.dispatch("自定义方法名")

5、modules

当遇见大型项目时，数据量大，store就会显得很臃肿

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割