vueX的使用

vuex管理全局状态

state.js文件 vuex管理的状态唯一的

export default {
  count: 0 // 存放的全局使用的状态
}

在vue组件中使用

• this.$store.state.count 调用
• 也可以使用vuex中再带的mapState方法调用

mutations.js 直接更新state的状态

• 接收state参数 这个就是上述全局的状态
• 里面进行逻辑操作
• action中的commit(‘mutations名称’,data)调用,间接更新state
• 只能写同步不能写异步

export default {
  // 更新state的函数
    increments(state,data){
      state.count+=1,
      data:actions中第二个参数传递过来的值
    }
}

actions.js

• 包含多个回调函数的对象
• 通过执行commit来触发mutation的调用
• 组件可以使用 $store.dispatch(‘action名称’,data)
• 可以包含异步操作 ajax和定时器

export default {
  increment({commit,state},datas){
  //  state是state的全局状态
  // 在vue中  
    //  ...mapActions('这个是模块的名字',[数组里面存放actions.js中的方法名字])
    //  this.方法调用传递的参数，然后datas作为接受
    commit('increments',data) //  调用mutations的方法
  }
}

getters.js

• 包含计算属性（get）对象
• 组件中 用 $store.getters.xxx调用

export default {
   evenOrOdd(state){
   // state是state里面的全局状态  return出去即可
    return state.count %2===0?'偶数':'奇数'
  }
}

在组件中使用

<template>
<div id="app">
  <p>click{{count}} count is {{ evenOrOdd }}</p>
  <button @click="increment('参数')">+</button>
</div>
</template>

<script>
import {  mapState, mapActions, mapGetters } from 'vuex'
export default {
  watch: {
    todus: {
      deep: true // 深度监视 保存到localStore
    }
  },
  methods: {
    ...mapActions('模块的名字'['increment'])
    // 应该是设置不同的模块存放不同角色的全局对象
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['evenOrOdd'])
  },
}
</script>

去掉vue脚手架的严格模式

module.exports = {
  lintOnSave: false
}