Vuex详解回顾，一文彻底搞懂Vuex

一：安装

2022年2月7日，vue3就成为了默认版本。并且vue3成为默认版本的同时，vuex也更新到了4版本。也就是，现在如果执行npm i vuex，安装的就是vuex4了。安装vuex就需要指定版本，输入：npm i vuex@3，即可。

npm install vuex@3 -S

二：配置

// 导入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
// 创建store对象
export default new Vuex.Store({
  // 全局的数据，相当于data
  state: { },
  getters: { },
  //里面定义方法，操作state的方法
  mutations: { },
  // 异步操作mutation
  actions: { },
  modules: { },
})

// 在main.js中挂载到vue实例对象
import store from './store/store.js'
new Vue ({
el: '#app' ,
render: h => h(app),
router,
//将创建的共享数据对象，挂载到Vue实例中，所有的组件，就可以直接从store中获取全局的数据了
store
}) 

三：核心概念

vuex中一共有五个状态 State  Getter  Mutation   Action   Module  下面进行详细讲解

3.1：State 

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存。

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  // 全局数据，相当于data
  state: {
    count:0
  },
})

组件使用 state 中数据的方法一：

       就是用 this.$store.state.全局数据名称 获取你在 store 中的 state 里面定义的数据，然后在组件中用 {{ }} 插值表达式的形式展示出来。

<div> {{$store.state.count}} </div>

组件使用 state 中数据的方法二：

        在需要使用共享数据的组件里，先导入 mapState 函数，然后再计算属性里获取定义的数据，直接使用即可。

<h3>当前最新的count值是:{{ count }}</h3>

//1.从 vuex中按需导入 mapState 函数
import { mapState } from 'vuex'

// 2.将全局数据，映射为当前组件的计算属性
computed: {
    ...mapState(['count'])
}

3.2：Mutation

实现的第一种方式：

       先在 Store.js 文件中创建的实例对象里使用 mutations，在里面创建一个方法供组件使用，方法里面的第一个参数一定是 state ，只要外界调用了这个函数，就可以执行方法里面的代码。

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  // 全局数据，相当于data
  state: {
    count:0
  },
  mutations: {
    add(state) { state.count++ }
  }
})

       回到对应的组件里面，通过 this.$store.commit 方法调用我们之前在 Store.js中的 mutations 中创建的方法名称。

<button @click="addCount">点我count值+1</button>

methods: {
  addCount() { this.$store.commit('add') },
},

组件在调用在Store.js中的 mutations 里创建的方法也可以传递参数。

const store = new Vuex.Store({
  state: {count: 1},
  mutations: {
    add(state,step) { state.count += step }  // step就是组件传的参数3
  }
})
// 在组件中调用的方法里添加参数
 methods: {
    addBtn() { this.$store.commit('add', 3) },
  },

实现的第二种方式：

       同第一种方法一样，先在 Store.js 文件中创建的实例对象里使用 mutations，在里面创建一个方法供组件使用，然后在需要使用共享方法的组件里，先导入 mapMutations 函数，然后在组件中已经定义好的方法里面直接引用就好.

import { mapState, mapMutations } from 'vuex' 

   methods: {
    ...mapMutations(['add']),
    addCount() { this.add() }
  },

3.3：Action ——进行异步操作

        在 action 中不能直接修改 state 中的数据，只能通过 context.commit() 去触发某个 mutation 中的方法才行，commit 的作用就是调用某个 mutations 里面的函数。

actions: {
    addAsync(context) {
      setTimeout(() => {
        context.commit('add')
      }, 1000);
    }
  }

实现的第一种方式：

在组件中触发 Action ，这里的 dispatch 函数专门用来触发 Action

addCount() {
   this.$store.dispatch('addAsync')
 },

实现的第二种方式：

methods: {
    ...mapActions(['addAsync'])
    handleQuery () {
       this.addAsync()
    }
}

3.4：Getter

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  // 全局数据，相当于data
  state: {
    count:0
  },
  mutations: {
    add(state) { state.count++ }
  },
  getters: {
    getNewCount (state) {
        return state.count + 2
      })
    }
  }
})

在组件中使用：

import { mapGetters } from 'vuex'
// mapGetters的作用：把getters映射为计算属性
computed: {
    ...mapGetters(['getNewCount'])
}

总结：

1. getters相当于对state中的数据进行加工处理后再提供给组件；
2. getters不要修改state中的数据；
3. getters类似之前的计算属性（基于state中的数据进行计算）。

3.5：Modules

import Vue from 'vue';
import Vuex	from 'vuex';
// 模块
import user	from './modules/user';
import chat	from './modules/chat';

Vue.use(Vuex);

const store = new Vuex.Store({
	modules: {
		chat, // 即时通讯
		user, // 用户中心
	}
});

export default store;

如果模块采用的命名空间

const moduleB = {
    namespaced: true,
    state: () => ({
        b: '我是moduleB'
    }),
    mutations: {},
    actions: {},
    getters: {}
}

export default moduleB

组件在使用的时候则需要添加模块名

methods: { 
  ...mapActions('模块名', ['xxx']), 
}