Vuex的基本介绍及Vuex的五个核心属性,使用场景

Vuex

Vuex是什么:

介绍:Vuex是专门为Vue.js设计的状态管理模式。它采用集中式储存管理Vue应用中所有组件的状态
理解:核心就是 store(仓库),仓库是用来干什么的?你就当它用来储存东西的。

Vuex可以理解为一种开发模式或框架,通过状态集中管理驱动组件的变化,应用级的状态集中放在store中,改变状态的方式是提交mutations,异步逻辑封装在action中

使用 Vuex 统一管理状态的好处 :

能够在 vuex 中集中管理共享的数据,利于开发和后期的维护;

能够高效的实现组件之间的数据共享,提高开发效率;

存储在 vuex 中的数据都是响应式的,能够实时保持数据与页面的同步;

什么样的数据适合存储在 vuex 中 :

一般情况下,只有组件之间共享的数据,才有必要存储在 vuex 中,对于组件中的私有数据,依旧存储在组件自身的 data中即可。

在 Vue 中使用 Vuex 的基本使用 ?

安装 Vuex 依赖项 :

npm install vuex --save

导入 Vuex 包 :

import Vuex from 'vuex'
Vue.use(Vuex)

创建 Store 对象 :
const store = new Vuex.store({
//state中存放的就是全局共享的数据

 state:{count:0},
    mutations:{},
    actions:{},
    getters:{}
})

将 Store 对象挂载到 Vue 实例中 :

new Vue({
	el:"#app",
	render:h => h(app),
	router,
	//将创建的共享数据对象,挂载到vue实例中
	//所有组件,就可以从store中获取全局的数据了
	store
	})

Vuex的核心属性:

state:定义初始化状态
getters:获取状态
mutations:设置状态
actions:异步提交mutations
modules:把状态管理模块化,各自的组件构成各自的模块

State
state即Vuex中的基本数据!

单一状态树
Vuex使用单一状态树,即用一个对象就包含了全部的状态数据。state作为构造器选项,定义了所有我们需要的基本状态参数。

在Vue组件中获得Vuex属性
我们可以通过Vue的Computed获得Vuex的state,如下:

const store = new Vuex.Store({
    state: {
        count:0
    }
})
const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        }
    },
    //..
})

getters
即从store的state中派生出的状态。

getters接收state作为其第一个参数,接受其他 getters 作为第二个参数,如不需要,第二个参数可以省略如下例子:

const store = new Vuex.Store({
    state: {
        count:0
    },
    getters: {
        // 单个参数
        countDouble: function(state){
            return state.count * 2
        },
        // 两个参数
        countDoubleAndDouble: function(state, getters) {
            return getters.countDouble * 2
        }
    }
})

与state一样,我们也可以通过Vue的Computed获得Vuex的getters。

const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        },
        countDouble: function(){
            return this.$store.getters.countDouble
        },
        countDoubleAndDouble: function(){
            return this.$store.getters.countDoubleAndDouble
        }
    },
    //..
})

每当 store.state.count 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。

Mutation : 更改 Store 中的数据
Mutation: (同步)用于更改 Store 中的数据。只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据,通过这种方式虽然操作起来比较繁琐一些,但是可以集中监控所有数据的变化。

//定义Mutation
const store = new Vuex.Store({
state:{
    count = 0;
},
mutations:{
add(state){
//变更状态
    state.count++;
  }
 }
})

actions

Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
我们用如下例子来结束actions:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      setInterval(function(){
        context.commit('increment')
      }, 1000)
    }
  }
})

注意:Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。

分发actions
Action 通过 store.dispatch 方法触发:
store.dispatch(‘increment’)
其他与mutations类似的地方
Actions 支持同样的载荷方式和对象方式进行分发:

// 以载荷形式分发
store.dispatch('incrementN', {
  n: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementN',
  n: 10
})

Modules

使用单一状态树,导致应用的所有状态集中到一个很大的对象。但是,当应用变得很大时,store 对象会变得臃肿不堪。

为了解决以上问题,Vuex 允许我们将 store 分割到模块(module)。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割:

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

对于使用Vuex的理解是什么:

由于Vue是单向数据流,子组件内部不能直接修改从父级传递过来的数据,子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话,可以借助子组件 A 向父组件传值,父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。

   但是这样会有一个问题,就是如果子组件 A 的父组件上面还有一层爷爷组件,或者还有更多祖父类型的层级,那么是不是会很麻烦。

   因此,我们会想到能不能我们将一个共有的数据存在一个特定的地方,用的时候自己去拿,这样就不需要一层层传值,于是乎 Vuex 就应运而生了。

vuex的使用场景

场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车vuex是一种集中式状态管理模式,它按照一定的规则管理状态,保证状态的变化是可预测的。

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页