20200918- 前端业务项目的日常记录

1. Vue状态管理

大项目中，状态管理用Vuex。
而小项目中，如果有一处需要被多个实例（组件）间共享的状态，可以使用store模式。

• 文件夹层级：src/store/myStore.js
• myStore.js

      var myStore = {
        debug: true,
        state: {
          msg: 'hello'
        },
        setMsgAction (newValue) {
          if (this.debug) console.log('setMsgAction trigged with ', newValue)
          this.state.msg = newValue
        },
        clearMsgAction () {
          if (this.debug) console.log('clearMsgAction trigged')
          this.state.msg = ''
        }
      }
      
      export default myStore // 不要忘记导出export，不导出怎么用
      

• 在组件中使用store模式

      import myStore from '@/store/myStore'
      export default {
      	data () {
          return {
          	shareState: myStore.state // 此处必须这样写，如果写成sharedState: store.state.message则不能同步更新
          }
      	},
      	mounted () {
      		console.log(this.sharedState.message) // 输出'hello'
      	}
      }

---

vuex是一个状态管理模式，当组件进行数据修改的时候，需要调用dispatch来触发action里面的方法。action里面的每个方法中都会有一个commit方法，当方法执行的时候会通过commit触发mutatuions里面的方法进行数据的修改。mutations里面每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改

• 安装vuex：

  npm install vuex --save
  

  main.js:

  import Vuex from 'vuex'
  Vue.use(Vuex)
  
  const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
  		increment (state) {
        
      }
    }
  })
  

• 安装Promise

  npm install es6-promise --save
  

2. vue深拷贝、浅拷贝

• 浅拷贝

当一个对象直接赋值非另一个对象时，修改另一个对象的值会影响前一个对象的值

      let a = this.vehicleChange
      let b = this.vehicleChangeData
      b = a

比如，修改b对象中的name属性时，会同时把a对象中的name也修改掉

• 深拷贝

      this.vehicleChangeData = JSON.parse(JSON.stringify(this.vehicleChange))

JSON.stringify()对象转为串，JSON.parse()串转为对象，JSON操作是深拷贝操作。

注意：如果是对象的赋值，一般都是用深拷贝，否则会一起改变。通常使用的浅拷贝是适用于除对象以外的直接赋值

---

Smile and let everyone know that today you’re a lot stronger than you were yesterday.
用微笑告诉世人，今天的你比昨天更加强大。