仓库Vuex

Vuex

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

vuex3.0适用于vue2.0

vuex4.0适用于vue3.0和2.0

 

引入方式

1、

安装　　npm i vuex

导入　　src/store/index.js：　　import Vuex from "vuex"

State

1、创建state状态,状态就是那个存数据的对象

2、组件中访问数据

this.$store.state.msg

 

Getter

1、getter就就像是store的计算属性,它会传入state对象供我们操作

2、组件中访问数据

this.$store.getters.computed

Mutation

1、组件中希望更改 Vuex 的 store 中的状态(数据)的唯一方法是提交 mutation

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    //默认传第一个参数传state
    increment (state,obj) {
      // 变更状态
      state.count=obj.n
    }
  }
})

 

2、组件中访问数据

this.$store.commit('increment',{n:100})

2.2 可以以一个对象的形式传入

相当于把整个对象作为了第二个参数传入mutations

this.$store.commit({
  type: 'increment',
  n:100
})

 

注意:一条重要的原则就是要记住 mutation 必须是同步处理

 

Action

1、Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state,obj) {
      state.count=obj.n
    }
  },
  actions: {
    //默认第一个参数传一个跟store一样的对象
    increment (context,obj) {
        //假设fnAsync是一个异步业务函数
        fnAsync(() => {
          context.commit('increment',obj)
        })      
    }
  }
})

2、使用

2.1直接分发

this.$store.dispatch('increment',{n:100})

 

2.2以对象形式分发

this.$store.dispatch({
  type: 'increment',
  n:100
})

 

Module

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