vuex--day72--vuex总结

雪落无痕1 / 2023-08-27 / 原文

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

 

   ```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```