Vuex是什么

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

Mutations: 加工、维护

State: 状态和数据

Dispatch：派遣、发出

Commit：提交

Render: 渲染

Mutate：转变

从这些单词中，大体上可以概括整个图的流程。

VC派发（Dispatch）消息到Actions，Actions提交（Commit）到Mutation，Mutation转变（Mutate）state，然后重新渲染整个页面。

view—————=>actions——————=>mutations——————=>state——————=>view

安装 Vuex

注意：vue3只能用vuex4版本，vue2只能用vuex3版本。2022年2月7日之后，vue3成了默认版本，vuex4相应的也成了默认版本。所以对于vue2，要注明vuex的版本 @3

yarn add vuex@3.6.2 --save

用来管理状态，共享数据，在各个组件之间管理外部状态如何使用？

第一步：引入vuex，并通过use方法使用它
第二步：创建状态仓库
第三步：通过this.$sore.state.XXX直接拿到需要的数据

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

//创建状态仓库 注意Store,state不能改
export default new Vuex.Store({
    state: {
        num: 88,
    }
})

1、Store

在main.js中引入Store

import store from "@/store";

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

通过this.$sore.state.XXX直接拿到需要的数据

computed: {
    getOutCount() {
      return this.$store.state.num;
    }
}

2、Mutations修改State: 状态和数据，并共享数据

在状态仓库里

mutations:{
  increase(state){
      state.num++;
  },
  decrease(state){
      state.num--;
  }
}

组件中

methods:{
    oadd(){
      this.$store.commit('increase');//increase在mucations中定义的方法名
    }
}

Mutations：传的参数是state，直接改变状态

3、actions:

传的参数是上下文对象
actions提交的是Mutations，而不是直接变更状态
actions可以包含异步操作，但是mutation只能包含同步操作

在状态仓库里

actions:{
    decreaseAction(context){
        //action中只能对mutations进行操作
        context.commit('decrease');
    }
}

this.$store.dispatch('decreaseAction');在实例中操作

methods:{
    oadd(){
      this.$store.commit('increase');
    },
    ominusAction(){
      this.$store.dispatch('decreaseAction');
    }
}

4、getters

通过getters来获取state,要更改获取方式this.$store.getters.getCount

getters:{
    getNum(state){
        return state.num > 0 ? state.num : 0;
    }
}

computed: {
    getOutCount() {
      // return this.$store.state.num;
      return this.$store.getters.getNum;

    },
},

《vue-Vuex之store》