Vuex

• 是什么

  • 复杂场景组件之间通信

  • vuex是vue的一个状态管理工具,状态就是数据

  • 大白话: vuex是一个插件,可以帮助我们管理 vue通用数据(多组件数据共享)

• 场景

  • 某个状态在多个组件使用(个人信息)
  • 多个组件 共同维护 一份数据(购物车)

• 优势

  • 数据集中化管理
  • 响应式

• vuex遵循单向数据流

初始配置

1. 安装 vuex

   • npm install vuex@next --save # 对于 Vue 3
   • npm install vuex --save # 对于 Vue2

2. 新建vue模块

   • 新建store/index.js文件 专门存放 Vuex

3. 创建仓库

   // store/index.js// 导入 Vuex，它是 Vuex 状态管理库的核心import Vuex from 'vuex';// 创建一个新的 Vuex.Store 实例// 这个实例将作为全局状态管理器export default new Vuex.Store({  // 定义应用的状态（state）  state: {    // 一个名为 count 的状态，初始值为 0    count: 0  },  // 定义更改状态的方法（mutations）  mutations: {    // increment 方法用于更新 count 状态    // state 是 Vuex state 对象，v 是传递给 mutation 的参数    increment(state, v) {      // 将 count 状态更新为传入的参数 v      state.count = v;    }  },  // 定义异步提交状态更改的方法（actions）  actions: {    // increment 方法用于异步提交 increment mutation    increment({ commit }) {      // 调用之前定义的 increment mutation      commit('increment',10);    }  },  // 定义从状态派生的状态（getters）  getters: {    // doubleCount 方法返回 count 的两倍    // state 是 Vuex state 对象    doubleCount(state) {      // 返回 count 状态的两倍      return state.count * 2;    }  }});

4. 挂载main.js

// main.jsimport Vue from 'vue';import App from './App.vue';import store from './store/index';// 使用 Vuex 插件Vue.use(Vuex);new Vue({  store,  render: h => h(App)}).$mount('#app');

配置项

• new Vuex.Store({配置项})

state

• 根状态对象，包含所有的状态数据

• 核心配置项(必要的)

• 获取数据

  • 通过this.$store.属性名
  • 通过 import 导入 store 然后使用

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex); // 使用 Vuex 插件const store = new Vuex.Store({  state: {    count: 1  },});

getters

• 根getter函数，允许从state派生出一些状态
• 对数据进一步,派生状态
• 使用
  • $store.getters.filterList()

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex); // 使用 Vuex 插件const store = new Vuex.Store({  state: {    list: [1,2,3,4,5,6,7,8,9]  },  getters:{      //过滤 <= 5 的数据     filterList(state){         return state.list.filter(item=> item > 5)     }  }});

mutations/actions

• 用于变更state中的状态数据

• actions:异步操作或复杂逻辑的提交（调用mutation）的包裹函数

• Mutations：通常使用全小写字母，并且可以使用下划线来分隔单词，例如 update_count。

  • 第一个参数是state也就是状态 ,通过state 来调用数据

• Actions：可以使用驼峰命名法，并且通常在名称中包含动词，以表明它们执行的操作，例如 updateCount。

  • 第一个参数是context 是上下文,和 state相似

import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex); // 使用 Vuex 插件const store = new Vuex.Store({  state: {    count: 10  },  actions: {    async updateCount({ commit }, n) {      commit('update_count', n);    },    async updateCount2(context, n) {      context.commit('update_count', n);    }  },  mutations: {     //可以同名,但是不推荐    update_count(state, n) {      state.count = n;    }  }});export default store;

modules

分模块

• Vue 使用单一状态树,当项目比较大时,状态会集中,从而导致项目臃肿
• 将vuex配置文件导入 根配置下的 modules 就可以了

导入模块

// store/modules/user.jsconst state = { ... };const mutations = { ... };const actions = { ... };const getters = { ... };export default {  state,  mutations,  actions,  getters};// store/index.js 根模块import Vuex from 'vuex';import user from './modules/user'; const store = new Vuex.Store({  modules: {    user  }});export default store;

使用

• 子模块state

  • $store.state.模块名.属性名
  • mapState映射:
    mapState('模块名',['属性名']);
this.属性名 就可以访问数据了

• 子模块getters

  • $store.getters['模块名/属性名称']
  • mapGetters映射:
    mapGeters(‘模块名’,[‘属性名’,‘属性2’])
    this.属性名 就可以获得数据
  • 模块名/属性名称:是因为命名是时候就是这命名的

• 子模块mutations

  • $store.commit['模块名/属性名称']
  • mapMutations映射:
    mapMutations(‘模块名’,[‘函数名’,‘函数2’])
    this.函数名() 就可以调用函数了
  • 模块名/属性名称:是因为命名是时候就是这命名的

• 子模块actions

  • $store.dispatch['模块名/属性名称']

  • mapActions映射:
    mapActions(‘模块名’,[‘函数名’,‘函数名2’])

    this.函数名() 就可以调用函数了

  • 模块名/属性名称:是因为命名是时候就是这命名的

数据的更改

• this.$emit() 是 Vue 组件中用来触发自定义事件的方法。当调用 this.$emit('eventName', param) 时，它会向父组件发出一个事件，父组件可以监听这个事件并做出响应。
• 同步:
  • 而在 Vuex 中，this.$store.commit('mutationName', param) 用于触发状态变更。这里的 commit 方法用于调用 store 中定义的 mutations，mutations 是同步函数，用于更改 store 中的状态（state）。
• 异步:
  • this.$store.dispatch('actionName', payload) 来分发 actions。这会告诉 Vuex 执行相应的 action 函数。

辅助函数

mapState

• 将store中的数据,自动映射到 组件的 计算属性中
• 可以直接this.属性名 来访问数据

//引入mapStateimport { mapState } from 'vuex';//使用export default {  computed: {    // 使用对象展开运算符将所有映射的状态转为计算属性    ...mapState([      // 映射 this.count 为 store.state.count      'count'    ]),    // 映射 this.doubleCount 为 store.getters.doubleCount    ...mapState({      'doubleCount': state => state.count * 2    })  }}//-------------------computed:{ ...mapState['状态名'] }//# 等价computed:{ '状态名'(){    return this.$store.state.count}}

mapMutatuons

• 将mutations同步函数 中的方法,映射到 methods中
• 可以直接this.函数名(n) 来调用函数

//引入 mapMutatuonsimport {mapMutatuons} from 'vuex'//使用export default {  methods: {    ...mapMutations([      'update_count' // 直接使用 mutation 名称    ]),    ...mapMutations({      'set_count': 'update_count' // 为 mutation 提供一个别名    }),    increment() {      this.update_count(1); // 调用 Vuex store 的 mutation    },    decrement() {      this.set_count(-1); // 使用别名调用 mutation    }  }}//---------------------------------methods:{  ...mapMutations(['方法名'])  }//等价methods:{  '方法名'(参数){     this.$store.commit('方法名',参数)  }}

mapActions

• 将actions异步操作中的方法,映射到 methods中
• 可以直接this.函数名(n) 来调用函数

//导入mapActionsimport { mapActions } from 'vuex';//使用export default {  methods: {    ...mapActions([      'UpdateCount' // 将 `this.update_count` 映射为 `this.$store.update_count('actionName',obj)`    ]),    ...mapActions({      'mappedActionName': 'UpdateCount' // 将 `this.mappedActionName` 映射为 `this.$store.dispatch('update_count')`    }),  }}//--------------------methods:{    ..,mapActions([方法名])}# 等价methods:{  '方法名'(参数){     this.$store.dispatch('方法名',参数)  }}

mapGetters

• 将getters中的函数 中的方法,映射到 computed中
• 可以直接this.函数名(n) 来调用函数

示例

<template></template><script>import {mapState,mapMutations,MapActions,MapGetters} form 'vuex'export default{    name:'test',    computed:{       ...mapState(['count']),       ...maoGetters(['filterList'])    },    methods:{       ...mapMutations('updata_count'),       ...MapActions('UpdataCount')    }}</script>