vuex（集中式管理数据状态方案）

是什么：vue官方提供的独立于组件体系之外的，管理公共数据的工具

1、安装及使用

安装

如果是没有安装的话就需要手动下载

第一步：npm i vuex@3.6.2 (支持vue2的版本，vue3不用加版本号)

第二步：在src文件夹里创建一个store文件夹，里面创建一个index.js文件，文件内容如下：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

第三步：在main.js文件引入并启用

import Vue from 'vue'
import router from './router'       //引入路由
import store from './store'         //引入vuex


Vue.config.productionTip = false

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

Vuex中有5个内容需要学习：

1、state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）

2、mutations ： 使用它来修改数据(类似于methods)

3、getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 ) 4、actions： 发起异步请求

5、modules： 模块拆分

2、state

定义数据:

state:{
   num:12,
   name:'罗阳'
 }

//或者

state(){
	  return{
 	   		num:12,
   		   name:'罗阳'
  	}
 }

使用数据的格式：this.$store.state.num

3、mutations

mutations用于修改公共数据（用它来修改state里的数据）

 定义格式:

mutations：{
    // 每一项都是一个函数，可以声明两个形参
  	mutation名1：function(state , obj) {            //这里的obj为接受传递过来的参数
  
    },
    mutation名2：function(state ,obj) {
    },
}

使用格式：this.$store.commit('mutation名', 实参)

4、getters

在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样)

定义：

getters: {
    // state 就是上边定义的公共数据state
    getter的名字1: function(state) {
      return 要返回的值
    }
  }

 在组件中通过：$store.getters.getter的名字 来访问

5、actions

actions-发异步请求

作用：发异步请求获取数据，调用mutations来保存数据，将整个ajax操作封装到Vuex的内部 ● 要点：

      ○action 内部可以发异步请求操作

      ○action是间接修改state的：是通过调用 mutation来修改state

定义：

new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入(相当于vuex的index.js这个组件，有些类似于this.$store)，它与store实例具有相同的方法和属性
    action的名字: function(context, 参数) {
      // 1. 发异步请求, 请求数据
      
      // 2. commit调用mutation来修改数据
      
      // context.commit('mutation名', 参数)
    }
  }
})

使用：在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action

5、modules

用modules之后代码结构优化

随着项目越来越大，需要放在vuex中的数据越来越多，可以将这些数据分割成多个模块。

作用：拆分模板，把复杂的场景按模块来拆开

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
  	模块名1： {
    		// namespaced为true，则在使用mutations时，就必须要加上模块名
      	namespaced: true, 
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
  			modules: {}
  	}，
    模块名2： {
        // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
         modules: {}
  	}  
  }
})

 也可以更进一步对文件进行拆分。

 

访问数据和修改数据的调整:

访问模块中的数据，要加上模块名

获取数据项： {{$store.state.模块名.数据项名}}

获取getters： {{$store.getters['模块名/getters名']}}

访问模块中的mutations/actions:

如果namespaced为true，则需要额外去补充模块名 如果namespaced为false，则不需要额外补充模块名

$store.commit('mutations名') // namespaced为false

$store.commit('模块名/mutations名') // namespaced为true

 优化后示意图：