vuex

66 阅读2分钟

概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

作用

专门解决传值问题

使用

安装方法:

npm install vuex

image.png

使用方法:

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
//main.js
const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
  store,
})

五大核心概念

state

用来存放共享数据的

const store = new Vuex.Store({
  state: {
    count: 10,
    like:["篮球","足球"],
    movie:{"name":"速度与激情",actor:"保罗沃克"}
  }
})

getters

类似于计算属性  ,默认接受第一个参数,该参数是所有的state,其他的用法跟computed是一模一样的

第二个参数是所有的getters

基本用法

index.js

const store = new Vuex.Store({
  state: {
    count: 10
  },
  getters:{
    money(state){
       return state.count+"元"
    }
  }
})

APP.vue

 mounted(){
    console.log(this.$store.getters.money) 
  }

getters也可以传参

 getters:{
    meiyuan:state=>(rate)=>{
      return state.rmb/rate
    }
  }

getters的第二个参数:所有getters

 getters:{
    money(state,getters){  
       return getters.info+"元"
    },
    info(state){
        return state.count*2
    }
  }

muttons

1.修改state数据的唯一办法就是提交mutation

2.mutations中修改的数据如果是引用类型,一定注意要完整的赋值(不能单独修改某一项)

基本用法

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

export default store

调用:

store.commit('increment')

为什么Mutation 必须是同步函数?

具体原因:为了让devtools 工具能够追踪数据变化

具体原因详解
每个mutation执行完成后都会对应到一个新的状态变更,这样devtools就可以打个快照存下来(每次状态的改变都会生产一个全新的 state 对象),然后就可以实现 “time-travel” 了。如果mutation支持异步操作,就没有办法知道状态是何时更新的,无法很好的进行状态的追踪,给调试带来困难。

actions

Action 类似于 mutation,不同在于: Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作。

mutaions actions流程

image.png

modules

基本用法

Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、 action、getter

单独定义一个模块跟我们之前定义store是一样的

image.png

image.png

image.png

image.png

辅助函数

image.png

语法

import { mapState } from 'vuex'
//mapState函数返回值是一个对象

工作中的写法:

image.png