VUEX基本介绍?

一、什么是Vuex?

Vuex是一个专为vue.js应用程序开发的状态管理模式。

当我们构建一个中大型的单页面应用程序时,Vuex可以更好的帮助我们在组件外部统一管理状态。

二、Vuex的五个核心概念

State

Getters

Mutations

Actions

Modules

其中State和Mutations在任何项目都会接触到的核心概念。为什么说这两个是最核心的呢?

第一、首先State是我们唯一的数据源,也就是说我们需要把组件里面的一些状态提取出来放到State里面去,State是我们唯一的载体,我们必须要去定义我们的State,这是至关重要的。

第二、怎么去改变State里面的值呢?比如说如何去修改购物车里面的商品数量,我们在商品列表里面+1,在购物车列表里面把他删掉,它就要-1,那么从哪去操作这个State,就通过Mutations,Mutations是唯一可以提交和改变状态的。

因此这两个状态是我们必须要掌握的。

Getters、Actions、Modules,如果我们的项目不是太过于复杂,那么仅仅使用State和Mutations这两就可以满足业务需求了。

接来下我们来分别来看看这几个状态。


首先第一个: State

1、什么是State,我也提到过,我们每一个组件里面的data里面的变量我们都称之为State,State也是我们整个Vue整个核心的概念,这也就是告诉我们的开发者,Vue是一个渐进式的框架,我们的使用状态去管理和操作我们的DOM,改变我们的UI,不是使用过去的那种直接操作DOM的方式。所以说State是我们VUEX里面的一个核心的概念,他在VUEX里面也是一个核心的概念。

State是唯一的数据源,也就是它是唯一的载体,我们需要把任何一个需要抽取出来的变量,都要放到我们的State里面去来进行管理,那么我们在任何一个页面都可以取到它。

单一的状态树,什么是单一的状态树,也是说我们通过定义一个store的实例,那么这个store实例里面只有一个State,单一的状态树,它不像我们的Vue组件里面还可以嵌套另一个组件,另一个组件里面还可以嵌套N的组件,这样它是一个很有层级的关系的东西;

但是我们这个VUEX,其实很单一,它就是一棵树,这棵树这个store对象只要注册到我们的main.js里面,只要被我们的vue注册之后,vue里面所有层级关系的组件都可以使用,它是比较单一的一颗状态树。

我们看下列组件,这是一个定时器的组件,他里面包括一个模板,我们可以看到模板里面用到count这么一个属性,我们可以看到它里面有个computed的计算属性,这个computed计算属性也就是说,当我们里面的变量发生变化了以后,它都会时时的进行计算,最后来渲染我们的视图。

我们可以看到它里面定义了count这么一个函数,computed里面必须都是函数,在计算属性里面它每个字段对应的都是函数,我们模板里面的count对应就是computed里面的count方法;当模板里面的count发生变化的时候,computed里面的count就会时时计算,计算完了就渲染到模板对应的位置。

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: { // 计算属性
    count () {
      return this.$store.state.count // this就是当前vue的实例,组件的实例;
      //.$store表示vuex注册到vue里面,那么全局任何一个组件都可以拿到这个vuex;
      //this.$store就是vuex的对象;
      //只要通过import导入vuex;
      // 然后通过vue.use我们的vuex,
      // 我们就是可以通过this.store拿到我们的vuex的对象
      // .state就是我们vuex里面定义的属性,它唯一的数据源
      // 我们任何的状态都必须定义到我们的stort里面去
      // count就是我们状态下挂的一个属性
      // 我们就是使用这种方式去使用vuex里面的状态
    }
  }
}

State是唯一的数据源,也就是说唯一的载体,只要通过import导入vuex;然后通过vue.use我们的vuex,我们就是可以通过this.store拿到我们的vuex的对象,.state就是我们vuex里面定义的属性,它唯一的数据源,我们任何的状态都必须定义到我们的stort里面去,count就是我们状态下挂的一个属性,我们就是使用这种方式去使用vuex里面的状态.

接下来,我们看看第二个,Getters

通过Getters可以派生出一些新的状态;我们看下面的例子:

我们new一个vuex的实例,这种方式就是定义vuex的实例,

const store = new Vuex.Store({ // 我们这样创建了一个vuex的对象,这个对象里面包括state,我们可以把任何的状态抽取出来都放到state里面去,
  // state是我们唯一的数据源,我们可以看到里面定义的数组,叫todos,加入这个todos是每个页面都要用到的数组
  // 接下来还定义了getters,getters和state是平级的关系;
  // 比如说现在又五个页面都使用到了这个数组,但是恰巧有一个页面它并不像完全应用这个数组,
  // 它只想用done是true的数组列表;
  // 我们可以通过getters对数组进行操作;
  // 我们直接 return state.todos.filter(todo => todo.done);通过它的filter过滤器返回todo.done为true的数据
  // getters是state的延伸,可以通过getters派生出一些新的状态
  // getters是基于todos来操作的
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})
我们再举一个例子,例如购物车的数量,大于99的时候,我们需要变成"99+";这时候你仅仅定义一个state肯定是满足不了的;我们需要重新去延伸一个getters去做我们这样的一个操作;


接下来我们来看一下Mutations

更改Vuex的store中的状态的唯一方法是提交mutation

我们看一下下列例子

const store = new Vuex.Store({ 
  state: { // 我们在Store里面定义一个state这么一个属性
    count: 1 // 它里面有个count这样的字段,值是1
  },
  mutations: { // 那么我们如何将count改成其他值呢,我们没有其他方法,必须通过mutations这个值
  // 怎么提交,比方说,我们定义一个mutations这么一个属性,它里面一个increment的函数,这个函数可以随便起
  // increment函数首先默认接收了一个状态;第一个参数就是state;这个state就是上面的state
  // 它可以通过state。count去拿到我们的状态值;来去给它++;来改变它的状态
  // 注意:只能在mutations里面去定义函数去提交改变state里面的值
  // 这种方式有什么好处,它就相当于我们管理我们的日志;管理我们的记录,在哪里怎么提交的,每一步都可以把它加到我们记录里面去;方便vuex的调试
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

接下来我们再来看一下怎么去调用这个函数

mutations里面只定义了函数,函数内部给值加1;但是需要有些地方去触发它

//那就是通过
store.commit('increment') //去提交这个函数,这样我们的值才能去加1;

比防说在我们的购物车列表页面,当我们加入购物车以后我们只需要调一下store.commit去提交increment;那我们的increment

就会把购物车的数量++;每个页面里面购物车数量都会++;这就是我们mutations的功能;


接下来我们来看下Actions

Action提交的是mutation,而不是直接变更状态

也就是说我们的状态值需要通过mutation来提交;那么mutation它可以通过Action来提交;

Action可以包含冉义异步操作

我们来看看下面的例子:

const store = new Vuex.Store({ // 我们new了一个vuex的实例
  state: { // 我们定义了一个状态
    count: 0
  },
  mutations: { // mutations是唯一用来提交count值的
    increment (state) {
      state.count++
    }
  },
  actions: { // actions也定义了increment;它默认接收一个context;context它可以直接去调用commit方法
  // 这都是vuex全局注册进来的
  // 通过context这个对象可以调用我们的commit来提交一个increment;这句话执行之后就会去调用mutation里面的increment方法,就会把count的值++;
  // 
    increment (context) {
      context.commit('increment')
    }
  }
})

所以说第一种就是在methods里面直接调用store.commit('increment') 方法;第二种就是定义一个actions,通过这个actions来提交increment;

好像显得有点多余,确实有点多余;但是有一种场景它是不多余的;就是mutation的函数必须是同步的;而Action可以做任意异步的操作;


最后我们来了解一下Modules

面对复杂的应用程序,当管理的状态比较多时;我们需要将vuex的store对象分割成模块(modules)。

下面我们来看一个例子:

const moduleA = { // 通过const来定义一个moduleA,再定义一个moduleB;每个模块都包括
 // stste,mutation,action,getters等一系列概念;
 // 只是说这些状态都是在A模块里面运用的;B模块里面也会应用到;但是如果我们的项目并不需要太多的状态管理;那么我们完全可以把它定义到vuex里面去;不需要进行拆分;
 // 只有在我们的页面里面概念比较多,而又不想和别的页面进行混淆的时候;
 // 大家可以把它拆分成每个模块
  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的状态管理图;这里还是需要给大家解释一下;解释完之后,大家可能会对这个概念理解起来稍微更清晰一点;


https://i-blog.csdnimg.cn/blog_migrate/96f683295b77044c190baaea188ccb90.png

下面我们再来看看我们的项目结构

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值