2021.11.22（搭建vuex环境）

• 跨域访问需要发送cookie时一定要加axios.defaults.withCredentials = true（或者在axios.create时配置withCredentials：true）
• v-model.number:收到的东西强制往数字类型上转
• vue脚手架会优先执行import语句（即使有的代码在import上面也会先执行import）

搭建vuex环境

1. 创建文件：src/store/index.js

   //引入Vue核心库
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //应用Vuex插件
   Vue.use(Vuex)
   
   //准备actions对象——响应组件中用户的动作
   const actions = {}
   //准备mutations对象——修改state中的数据
   const mutations = {}
   //准备state对象——保存具体的数据
   const state = {}
   
   //创建并暴露store
   export default new Vuex.Store({
       actions,
       mutations,
       state
   })
   

2. 在main.js中创建vm时传入store配置项

   ······
   //引入store
   import store from './store'
   ······
   
   //创建vm
   new Vue({
       el:'#app',
       render:h => h(App),
       store
   })
   

基本使用

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('action中的jia被调用了')
           context.commit('JIA',value)
       }
   }
   
   const mutations = {
       //执行加
       JIA(state,value){
           // console.log('mutations中的JIA被调用了')
           state.sum += value
       }
   }
   
   //初始化数据
   const state = {
       sum:0
   }
   
   //创建并暴露store
   export default new Vuex.Store({
       actions,
       mutations,
       state
   })
   

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

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