vuex基本使用

vuex基本概念

vuex是vue的状态管理工具，状态即数据。 状态管理就是集中管理vue中通用的一些数据

注意：

不是所有的场景都适用于vuex，只有在必要的时候才使用vuex
使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度
Vuex就像近视眼镜, 你自然会知道什么时候需要用它~

vuex的优点

vuex用于解决组件通讯的问题
vuex可以集中的管理vue项目中用到的所有数据

vuex基本使用步骤

1. state: 存放状态, 存数据的
2. mutations: 存放操作 state 状态的方法的
3. getters: 存放基于state派生出来的一些属性的 (state的计算属性)
4. actions: 存放一些异步的操作

基本使用

1. 安装

yarn add vuex

2. 引包

  <!-- 引包 -->
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script src="./node_modules/vuex/dist/vuex.js"></script>

// 如果是脚手架模块化的环境, 需要 use 一下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3. 使用

// 2. 创建一个vuex的store对象
const store = new Vuex.Store()

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello vue'
  },
  // 3. 关联 vm 和 store
  store
})

vuex 中如何提供数据, 组件如何访问数据

store与state

// 创建Store(仓库)，包含存储状态(state)
const store = new Vuex.Store({
  // 指定state属性，用于提供数据
  // 状态，类似于data，用于提供数据
  state: {
    count: 1
  }
})

// 直接访问
console.log(store.state.count)
// 由于建立了关联, 组件中访问, 通过  实例.$store.state  
console.log(vm.$store.state.count)

vue中如何修改 vuex 的数据

默认修改是能改的, 但是是不合理的, 所以一般需要开上严格模式

严格模式: https://vuex.vuejs.org/zh/guide/strict.html

const store = new Vuex.Store({
  // ...
  strict: true
})

不要在发布环境下启用严格模式！深度监听消耗性能

mutations的基本使用

修改vuex中的数据，必须通过 mutations进行修改，不能直接修改

1. mutations提供的都是方法, 这些方法是可以修改 state中的数据的
2. 所有的方法的第一个参数, 都是state

mutations: {
  // state：表示state对象
  add (state) {
    state.count++
  }
}

// 触发mutations
// 想要修改state，必须触发mutations提供的方法
store.commit('add')

**vue-devtools 配置允许以文件地址访问: https://blog.csdn.net/sunhl951/article/details/80185628**

提交载荷 Payload

额外参数（Payload）

// 定义mutations
// 如果要修改state，需要在mutations的方法修改
mutations: {
  addNum (state, num) {
    state.count += num
  }
}

// 提交mutations
store.commit('addNum', 5)

但是只能传递一个参数, 所以如果有多个参数, 传入一个对象即可

store.commit('addNum', { num: 5, msg: '嘎嘎' })

vuex 辅助函数的使用

但是刚才不爽的地方是, 每次都要写很多的计算属性, 只要要读取 仓库 store 中的内容, 要么就很长, 要么就要写计算属性

getters => mapGetters

state => mapState

mutations => mapMutations

mapGetters 辅助函数的使用

mapGetters 是一个函数, 作用: 将vuex中的 getters 直接映射给组件作为计算属性

https://vuex.vuejs.org/zh/guide/getters.html

每次要用数据, 都要用 计算属性, 其实也挺麻烦的, 可以利用辅助函数解决

先导入

import { mapGetters } from 'vuex'

展开混入

computed: {
  // 可以利用展开运算符, 混入到 computed 中
  ...mapGetters(['isShowFooter', 'count']),
  ...mapGetters({
    isClear: 'isShowClear'
  })
}

mapState 辅助函数

作用: 可以映射一个state属性

改造=> TodoMain 的 list

先导入

import { mapState } from 'vuex'

将来要使用 state 中的数据 :

  computed: {
    // 只要 store中 state中的 list 发生变化, list 就跟着改变
    // list () {
    //   return this.$store.state.list
    // }
    ...mapState(['list'])
  },

mapMutations 辅助函数的介绍

如果一个函数, 只是提交 mutations, 可以将 mutations 的提交操作, 进行简化操作

作用: 可以映射一个mutations方法

前提: 在方法中, 只进行了提交 mutations 可以简化

https://vuex.vuejs.org/zh/guide/mutations.html

import { mapMutations } from 'vuex'

methods: {
    // delTodo (id) {
    //   // 根据 di 去删除对应的数据 (数据在哪???)
    //   // 触发提交一个 mutation
    //   this.$store.commit('delTodo', id)
    // },
    // changeState (id) {
    //   this.$store.commit('changeState', id)
    // },

    // 映射方法
    ...mapMutations(['delTodo', 'changeState']),
}

vuex - actions

需求: 在一秒之后, 清空所有的已完成的内容

const mutations = {
  ...
  clearTodo (state) {
    setTimeout(() => {
      state.list = state.list.filter(item => !item.flag)
    }, 1000)
  }
}

强制要求: 一条重要的原则就是要记住 mutation 必须是同步函数。如果要异步, 扔到 action 里面

mutaion: https://vuex.vuejs.org/zh/guide/mutations.html

action: https://vuex.vuejs.org/zh/guide/actions.html

定义 actions

// actions 和 mutations 类似, 都是提供方法
// actions 不能直接操作 state, 需要提交 mutation
const actions = {
  // context: 上下文, 就是store对象
  clearTodoAction (context) {
    setTimeout(() => {
      context.commit('clearTodo')
    }, 1000)
  }
}

使用

import { mapActions } from 'vuex'

// clearTodoAction () {
//   使用 dispatch 分发 action
//   this.$store.dispatch('clearTodoAction')
// }
...mapActions(['clearTodoAction'])