vuex的使用

一 vuex的一些知识

1.1 vuex是什么

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

1.2 安装

//npm
npm install vuex --save
//yarn
yarn add vuex
在模块化中使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

1.3 什么时候使用

当项目比较大时,各个组件之间有共享的数据时使用,例如购物车.

二 核心概念

state

仓库,保存要共享的数据

 // 仓库 数据定义在这个对象的内部
    // Vue实例的data属性
    state: {
      info: '感觉自己萌萌哒',
      num: 10
    },

在组件中访问

<h2>我是顶级的Vue实例{{ $store.state.info }}--{{$store.state.num}}</h2>

mutations

更改state中的状态,也就是修改state中的数据,
回调函数(必须是同步函数),只能传两个参数,第一个是state,传多个,后面的是undefined,所以要传多个时,第二个可以传对象或数组;

 // 提供的数据修改方法
    mutations: {
      // 参数1 固定是state就是 仓库内部的 state
      addNum(state) {
        console.log(state)
        // 在这里直接修改数据
        state.num++
      },
      // 接收参数
      addNumPlus(state, num) {
        console.log(num)
        // 累加传过来的值
        state.num += num
      },
      // 除了state之外只能接收一个参数 多余部分会变成undefined

注意当你动态的添加属性时,这个属性不是响应式的,需要使用Vue.set(obj, 'newProp', 123)

第一个参数表示要填加属性的对象
第二个参数表示要添加的属性名
第三个参数表示要添加的属性值

在组件中使用

      addNum2() {
        // 调用仓库方法
        this.$store.commit('addNum')//addNum为mutations中的回调函数名
      }
    }

这样使用比较麻烦,每次使用名字比较长,可以使用辅助函数mapMutations配合展开运算符...

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

getters

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

 // Vuex的计算属性
    getters: {
      // 参数1 数据 state
      biggerNum(state) {
        // 返回num 并乘以2
        return state.num * 2
      }
    }

Getter 会暴露为 store.getters 对象，你可以以属性的形式在组件中访问这些值：

{{ $store.getters.biggerNum }}

getters的辅助函数,使用之后组件中使用state中的名字就可以了{{属性名}}

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

actions

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

官方文档说的很详细,这里就不记录了