总结: Vue2中基础语法

总结: vue2中的基础语法(一)
总结: vue2中的基础语法(二)
总结: vue2中的基础语法(三)
总结: vue2中的基础语法(四)

目录 1.vue项目中使用vuex2.vuex定义公共样式state并在组件中使用3.vuex定义mutations且在组建中使用mutations4.vuex使用getters的派生状态5.vuex使用actions发送异步请求6.vuex使用modules拆分复杂的业务

1.vue项目中使用vuex

vuex是官方提供的独立于组件体系之外的, 管理公共数据的工具. 采用集中式存储管理应用的所有组件的状态, 解决多组件数据通信.

它的数据也像data一样是响应式的, 集中的管理方案可以让代码更加的简洁; 方便维护.

也就是如果一个项目想做大的话, 必须使用vuex; 如果仅止步于父传子, 子传父这样父子组件之间的数据传输的话, 项目是无法做大的.

如果是在老项目中就需要下包:
①npm i vuex@3.6.2
②配置

	2.1 创建store文件夹 --> index.js

	2.2 书写配置项:
	
		2.2.1 创建Vuex.store实例
		2.2.2 向Vue实例注入store

当然在创建项目之初就可以将vuex模块一起下载

2.vuex定义公共样式state并在组件中使用

stare核心属性类似于data, 可以说直接向data一样使用即可.

在store中配置state

在组件中调用state的数据
使用this.$store.state.数据方法调用即可.

3.vuex定义mutations且在组建中使用mutations

mutations使用来修改动态修改state中的数据的.

格式:

mutations: {
	mutations1(state, newDate) { // state是必传的, 它就是state核心属性
		业务代码......
	},
	mutations2(state, newDate) { // 后面的形参可以传多个, 但是必须是以对象的格式传入
		业务代码......
	}
}

配置项

组件中调用mutations中定义的方法
使用this.$store.commit(‘mutaions中的方法名’, 形参1 或 { 形参1,形参2… }).
在配置项接收, 然后修改对应的state数据即可.

4.vuex使用getters的派生状态

它就是在state的基础上对数据进一步的加工处理, 也就是computed(计算属性)

配置getters

getters: {
	getters1(state) { // state是必传, state就是核心属性
		return 业务代码......
	}
}

组件中使用getters
使用$store.getters.getters中的方法名.

5.vuex使用actions发送异步请求

actions属性主要的作用就是发送异步请求(如: ajax).

也就是将整个ajax *** 作封装到vuex内容, 减少重复代码

格式

actions: {
	actions1(content) { // content相当于store对象, 是自动传入的对象; 类似于event对象
		axios.get('后端接口地址').then((返回数据) => {
			业务代码......
			// 在actions中不能直接 *** 作state中的数据, 需要通过mutations中的定义的方法来访问, 如:
			// content.commit('mutation中的方法')
		})
	}
}

在组件中调用
使用this.$store.dispatch(‘actions方法名’)

6.vuex使用modules拆分复杂的业务

因为在实际开发过程中, vuex中的数据都写在一起的话会很复杂; 所以vue就提供了modules用来拆分相同类的数据.

拆分方法一

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文件夹中重新定义一个模块

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

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

访问模块中的mutations/actions:
如果namespaced为true，则需要额外去补充模块名
如果namespaced为false，则不需要额外补充模块名

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

$store.dispatch('actions名')        // namespaced为false
$store.dispatch('模块名/actions名')  // namespaced为true

在组件中使用模块中调用state
使用 {{ $store.state.模块名.数据 }}
注意自己定义的模块还是会被合并到store中去的, 如图:

在组件中使用模块中调用mutations
使用 this.$store.commit(‘模块名/方法名’)

在组件中使用模块中调用getters
使用 $store.getters[‘模块名/方法名’]

在组件中使用模块中调用actions
使用 this.$store.dispatch(‘模块名/方法名’)