vuex学习笔记（1）

目录

1.vuex基本概念

2.vuex的使用

3.state状态

3.1 组件直接获取数据

3.2 计算属性

3.3 辅助函数-mapState

3.3.1 mapState配合展开运算符

3.3.2 mapState可以是对象

4.mutations

4.1 带参数的mutations

4.2 辅助函数-mapMutations

5.actions

5.1 辅助函数-mapActions

 6. getters

6.1 辅助函数-mapGetters

---

1.vuex基本概念

vuex的作用是解决多组件状态共享的问题，在大型的项目中，组件通讯会变得很混乱，使用vuex可以统一管理组件之间的通讯。vuex是vue的状态管理工具，**状态即数据**。 状态管理就是集中管理vue中通用的一些数据。

2.vuex的使用

vuex是一个独立存在的插件，如果脚手架初始化没有选vuex，就需要额外安装。

yarn add vuex

在src目录下新建一个store目录下放置一个index.js文件。

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store()

// 导出仓库
export default store

在main.js中导入挂载到Vue实例上

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

这样就成功创建了一个空仓库。

3.state状态

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。

在store.js文件的state对象中添加需要共享的数据。

// 创建store对象
const store = new Vuex.Store({
  // vuex的配置
  // state: 状态 即数据 state指的是vuex中的数据
  state: {
    money: 1000
  }
})

在组件中获取money的几种方式：

3.1 组件直接获取数据

所有的组件中可以使用 this.$store 获取到vuex中的store对象实例。

<h1>state的数据{{ $store.state.money }}</h1>

3.2 计算属性

将state属性定义在计算属性中。

// 提供计算属性
computed: {
  money () {
    return this.$store.state.money
  }
}

<h1>state的数据{{ money }}</h1>

如果某个组件需要用到vuex中多个状态，需要创建多个计算属性。每次都这样一个个的提供计算属性, 太麻烦了。

3.3 辅助函数-mapState

mapState是辅助函数，帮助我们把store中的数据映射到组件的计算属性中。

我们先导入mapState。

import { mapState } from 'vuex'

采用数组形式引入state属性。

export default {
  computed: mapState(['money', 'coin'])
}

// computed: mapState(['money', 'coin']) 等价于下面
computed: {
  money () {
    return this.$store.state.money
  },
  coin () {
    return this.$store.state.coin
  }
}

3.3.1 mapState配合展开运算符

如果直接使用mapState,会导致组件无法提供自己的计算属性，需要配合展开运算符使用。

computed: {
  ...mapState(['money', 'coin']),
  sum () {
    return this.num1 + this.num2
  }
}

3.3.2 mapState可以是对象

如果需要对vuex中的数据进行重命名的时候，会使用对象的形式。

computed: {
  ...mapState(['coin']),
  ...mapState({
    money1: 'money',
  }),
  sum () {
    return this.num1 + this.num2
  }
}

4.mutations

state是vuex提供数据的，mutations是vuex提供修改数据的方法的。state数据的修改只能通过mutations，并且mutations必须是同步的。

在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。

const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV === 'development'
})

定义mutations

const store  = new Vuex.Store({
  state: {
    money: 1000
  },
  // 定义mutations，mutations是一个对象，对象中存放修改state的方法
  mutations: {
     add(state){
        state.money++
  }
})

组件中提交mutations

this.$store.commit('add')

4.1 带参数的mutations

传一个参数

mutations: {
  addMoreMoney (state, money) {
    state.money += money
  }
},

// 组件
addMore () {
  this.$store.commit('addMoreMoney', 1000)
}

提交的参数只能是一个，如果传递多个参数，可以传递一个对象。

payload 载荷 指的就是mutations的额外参数，payload是一个对象，可以传递多个参数。

addMoreMoney (state, payload) {
  state.money += payload.money
  state.car = payload.car
}
this.$store.commit('addMoreMoney', {
  money: 100,
  car: '小刀电动车'
})

// 或者可以解构
addMoreMoney (state, {money，car}) {
  state.money += money
  state.car = car
}

4.2 辅助函数-mapMutations

mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入。

// 将mutations的方法导入了methods中
import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['add'])
}

// 等价于
methods: {
      // commit(方法名, 载荷参数)
      add () {
          this.$store.commit('add')
      }
 }

然后就可以直接调用了

<button @click="add()">值</button>

Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中。

5.actions

actions则负责进行异步操作。

// 定义actions
actions: {
  setAsyncCount (context, num) {
    setTimeout(() => {
      context.commit('inputCount', num)
    }, 1000)
  }
},

// 调用
setAsyncCount () {
  this.$store.dispatch('setAsyncCount', 100)
}

5.1 辅助函数-mapActions

import { mapActions } from 'vuex'
methods: {
    ...mapActions(['setAsyncCount'])
}

// 调用
<button @click="setAsyncCount(100)">异步</button>

 6. getters

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters。getters:是vuex的计算属性。

getters: {
  nickname (state) {
    if (state.money >= 100) {
      return '苹果1号'
    } else if (state.money >= 10) {
      return '苹果2号'
    } else {
      return '苹果3号'
    }
  }
}

使用getters

<div>{{ $store.getters.nickname }}</div>

6.1 辅助函数-mapGetters

mapGetters和mapState的功能差不多。mapGetters把vuex的getters映射为组件的计算属性。

computed: {
    ...mapGetters(['nickname'])
}

// 调用
 <div>{{ nickname }}</div>