vue进阶篇 - vuex 基本使用

「这是我参与2022首次更文挑战的第8天，活动详情查看：2022首次更文挑战」。

上一篇简单的和大家介绍了关于vuex的安装和搭建vuex环境，在本篇我会给大家介绍一下关于vue中的vuex的基本的所以首先也就是对vuex进行初始化操作之后就是配置actions、配置mutations，操作文件store.js的文件或者直接写在一起： 第一种：直接在人口文件store中的index文件中写

  //引入Vue核心库
  import Vue from 'vue'
  //引入Vuex
  import Vuex from 'vuex'
  //引用Vuex
  Vue.use(Vuex)
  
  const actions = {
      //响应组件中加的动作
  	jia(context,value){
  		// console.log('actions中的jia被调用了',miniStore,value)
  		context.commit('JIA',value)
  	},
  }
  
  const mutations = {
      //执行加
  	JIA(state,value){
  		// console.log('mutations中的JIA被调用了',state,value)
  		state.sum += value
  	}
  }
  
  //初始化数据
  const state = {
     sum:0
  }
  
  //创建并暴露store
  export default new Vuex.Store({
  	actions,
  	mutations,
  	state,
  })

第二种：就是将state mutations actions这几个可能会变的很臃肿的对象提取成一个一个的js文件

第三种：最后的这种就是把一个一个功能给提出来相对的在提的过程和使用的过程都会发生一定的改变比如在入口文件到处去的时候就需要加上modules方法和开启命名空间之类的而在使用的时候也是有一定变化；

基本使用

1. 初始化数据、配置actions、配置mutations，操作文件store.js

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //引用Vuex
   Vue.use(Vuex)
   
   const actions = {
       //响应组件中加的动作
   	jia(context,value){
   		// console.log('actions中的jia被调用了',miniStore,value)
   		context.commit('JIA',value)
   	},
   }
   
   const mutations = {
       //执行加
   	JIA(state,value){
   		// console.log('mutations中的JIA被调用了',state,value)
   		state.sum += value
   	}
   }
   
   //初始化数据
   const state = {
      sum:0
   }
   
   //创建并暴露store
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state,
   })
   

2. 组件中读取vuex中的数据：$store.state.sum

3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

   备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

接下来的内容我也会和大家说更加详细的内容，毕竟这个vuex也可以说是vue中相当重要的办法了；