Vue-Vuex

一. Vuex概述

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

Vuex统一管理状态的好处

• 能够在vuex中集中管理共享的数据，易于开发和后期维护
• 能够高效地实现组件之间的数据共享，提高开发效率
• 存储在vuex中的数据都是响应式的，能够实现保持数据与页面的同步

二. Vuex的使用

1. 首先构建一个vue的工程项目：详细操作请点我.

2. 在src新建一个文件夹如下：
   

3. 在index.js中添加如下代码

import Vue from 'vue'
import Vuex from 'vuex'

//使用模块
Vue.use(Vuex)

// 2.创建对象
const store = new Vuex.Store({
  state:{
	isLogin:false,
    User:{}
  },
  mutations:{
    addUser(state,user){
        state.User=user
        state.isLogin = true
    }
  },
  actions:{

  },
  getters:{

  },
  modules:{

  }
})

// 3.导出对象
export default store

4. 挂载到Vue实例上（main.js）

import store from './store' //引入
/* eslint-disable no-new */
new Vue({
  el: '#app'
  store,
  components: { App },
  template: '<App/>'
})

三. Vuex的核心概念

示意图

3.1 state

state 提供唯一的数据资源,所有的共享的数据都要统一放到store 中的state中进行存储

定义变量并赋值

const store = new Vuex.Store({
  state:{
    //定义数据
	isLogin:false,
    User:{id:1}
  }
})

组件中取值

let a = this.$store.state.User.id 
//结果是a的值为1

注意如果是直接在模板中取值{{$store.state.User.id}}，前面不需要加this

3.2 mutation

mutation用于变更store中的数据

• 只能通过mutation更Store数据，不可以直接操作Store中的数据。通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。

在mutations添加一个方法

const store = new Vuex.Store({
  state:{
	isLogin:false,
    User:{}
  },
  mutations:{
    addUser(state,user){
        state.User=user
        state.isLogin = true
    }
  }
})

组件中调用

//第一个参数是你要调用的方法名，第二参数是你传递的参数
this.$store.commit('addUser',{id:1,name:'小明'}) //这是触发mutations的第一种方式，

3.3 action

用于处理异步任务

如果通过异步操作变更数据，必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。

在addUserAsync中创建异步任务

// 2.创建对象
const store = new Vuex.Store({
  state:{
	isLogin:false,
    User:{}
  },
  mutations:{
    addUser(state,user){
        state.User=user
        state.isLogin = true
    }
  },
  actions:{
    addUserAsync(contex,user){
      setTimeout(()=>{
        contex.commit('addUser',user)
      },1000)
    }
  }
 
})

在组件中调用

//第一个参数是你要调用的方法名，第二参数是你传递的参数
this.$store.dispatch('addUserAsync',{id:1,name:'小明'})

3.4 getter

Getter于对Store中的数据进行加工处理形成新的数据。他不会修改state中的原始数据起到的是包装数据的作用。

Getter 可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。Store 中数据发生变化，Getter 的数据也会跟着变化。

// 2.创建对象
const store = new Vuex.Store({
  state:{
	isLogin:false,
    User:{age:18,sex:'男',name:'张三'},
    
  },
  mutations:{
    addUser(state,user){
        state.User=user
        state.isLogin = true
    }
  },
  actions:{
    addUserAsync(contex,user){
      setTimeout(()=>{
        contex.commit('addUser',user)
      },1000)
    }
    
  },
  getters:{
    getUser(state){
      return `我的名字是${state.User.name},性别${state.User.sex},年龄${state.User.age}`
    }
  },
  modules:{

  }
})

在组件中调用

this.$store.getters.getUser