一篇搞定vuex（主要看代码+总结）

一：vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库，

二：vuex什么时候用

我们有一个数据，很多个组件需要用到它，这个时候就用vuex来对它进行管理，此时只需要调用vuex中存储的数据，不需要在每一个组件中编写。

三：vuex的使用

1.不分模块

@/store/index.js

import { createStore } from 'vuex'

export default createStore({
    // 全局状态初始值
  state: {
    count: 1
  },
  // 计算state，获取对应的值
  getters: {
    countStatus(state) {
      return state.count <= 1
    }
  },
  // 更新状态的方法,更新state的唯一方法.提交方法：（store.commit(方法名，参数)，触发mutations来修改state）
  mutations: {
    setcount(state, num) {
      state.count = num
    }
  },
  // 可以异步操作，可以返回promise，更改数据要传递到mutations中去更改
  actions: {
    // content:
    setcountPromise(content, num) {
      return new Promise((resolve, reject) => {
        if (num > 100) {
          reject(alert('值不能大于100'))
        } else {
          content.commit('setcount', num)
          resolve()
        }
      })
    }
  },
// 数据比较多，分模块
  modules: {}

})

@/App.vue

<template>
  <button class="handlecount"></button>
  <h1>{{num}}</h1>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { useStore } from 'vuex'
export default {
name: 'App'
setup() {
const store =useStore()
const count = store.state.count
//reactive是Vue3中提供实现响应式数据的方法
const data = reactive({
 // 在页面上展示需要放在reactive里面
num:count
})
console.log('修改getters之前', store.getters.countStatus)
    const handlecount = () => {
      // 非异步的方式触发
      // store.commit('setcount', 100)
      // 异步的方式触发
      store
        .dispatch('setcountPromise', 100)
        .then((res) => {
          console.log('值修改成功')
        })
        .catch((err) => {
          console.log(err)
        })
      console.log(store.state.count)
      console.log('修改getters之后', store.getters.countStatus)
    }
}
//...toRefs(data) vue3中对象的对象扩展符的使用方式
return{ ...toRefs(data)}

}
</script>

<style>

</style>

2.区分模块（大致相同）

1> 在index.js中做如下修改

import { createStore } from 'vuex'
// count随意起
import Count from './count.state.js'
export default createStore({
  // 数据比较多，分模块
  modules: {
    // Count:Count
    // 简写
    Count
  }
})

2>增加一个文件Count.js

export default {
  // 命名空间
  namespaced: true,
  // 全局状态初始值
  state: {
    count: 1
  },
  // 计算state，获取对应的值
  getters: {
    countStatus(state) {
      return state.count <= 1
    }
  },
  // 更新状态的方法，。更新state的唯一方法，提交方法，（store.commit+方法，触发mutations点修改）
  mutations: {
    setcount(state, num) {
      state.count = num
    }
  },
  // 可以异步操作，可以返回promise，更改数据要传递到mutations中去更改
  actions: {
    // content:
    setcountPromise(content, num) {
      return new Promise((resolve, reject) => {
        if (num > 100) {
          reject(alert('值不能大于100'))
        } else {
          content.commit('setcount', num)
          resolve()
        }
      })
    }
  }
}

3> 在App.vue中做一点细小的更改

<template>
  <h1>{{num}}</h1>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import { useStore } from 'vuex'
export default {
name: 'App'
setup() {
const store =useStore()
const count = store.state.count
//reactive是Vue3中提供实现响应式数据的方法
const data = reactive({
 // 在页面上展示需要放在reactive里面
num:count
})
console.log('修改getters之前', store.getters['Count/countStatus'])
    const handlelogin = () => {
      // 非异步的方式触发
      // store.commit('setcount', 100)
      // 异步的方式触发
      store
        .dispatch('Count/setcountPromise', 100)
        .then((res) => {
          console.log('值修改成功')
        })
        .catch((err) => {
          console.log(err)
        })
      console.log(store.state.Count.count)
      // store.getters.Count.countStatus这样写的话会有错误，需改成store.getters.Count/countStatus，这样虽然正确，但是不符合语法，此时就是对象，如果对象的语法不符合变量语法此时就中括号【】加字符串[]就可以了['Count/countStatus']
      console.log('修改getters之后', store.getters['Count/countStatus'])
    }
}
//...toRefs(data) vue3中对象的对象扩展符的使用方式
return{ ...toRefs(data)}

}
</script>

<style>

</style>

总结：

每一个 Vuex 应用的核心就是 store（仓库），它包含着你的应用中大部分的状态 (state)。
状态管理有5个核心：state、getter、mutation、action、module。

State： 用来存储全局，公共的数据
1、单一状态树，定义应用状态的默认初始值，页面显示所需的数据从该对象中进行读取。
2、Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。它便作为一个“唯一数据源”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。
3、单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
4、不可直接对 state 进行更改，需要通过 Mutation 方法来更改。
5、由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

Getter
1、可以认为是 store 的计算属性，对 state 的加工，是派生出来的数据。
2、就像 computed 计算属性一样，getter 返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。
3、可以在多组件中共享 getter 函数，这样做还可以提高运行效率。
4、在 store 上注册 getter，getter 方法接受以下参数：
state, 如果在模块中定义则为模块的局部状态
5、getters, 等同于 store.getters

Mutation：(触发方式：store.commit('mutations中定义的方法'，'参数')）
1、Vuex中store数据改变的唯一方法就是mutation
2、通俗的理解，mutations 里面装着改变数据的方法集合，处理数据逻辑的方法全部放在 mutations 里，使数据和视图分离。

Action

异步方法，返回一个promise的是对象，它修改数据要传递到mutations中（也就是修改数据的话，要调用mutations中的方法 (content.commit())）（异步方法触发：首先要在actions当中调用content.commit('mutations中定义的方法'，'参数'),之后再调用store.dispatch('actions中的方法'，'参数')）
action 类似于 mutation ，不同在于：
1、action 提交的是 mutation，通过 mutation 来改变 state ，而不是直接变更状态。
2、action 可以包含任意异步操作。

Module
1、由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
2、为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割