vuex状态管理的学习

cnpm i vuex -S

• 引入vuex 并注册

import Vuex from 'vuex'
Vue.use(Vuex)

• 创建Vuex的实例

const store=new Vuex({
    modules:{

    }
})

• store实例的属性和方法名字

  属性名	属性值
  state	{}

• store实例的方法

  属性名	默认值（接收的值）	方法的作用
  getters	state	用来创建返回state里面的属性值的方法
  mutations	state	用来创建处理store里面的数据的方法，不过处理的方法是同步的
  actions	context	用来创建处理store里面的数据的方法，不过处理的方法是异步的
  modules	{}	用来传入模块

• Vuex的实例存储的数据是全局的
• 要操作的话建议使用mutations和actions中定义的方法，便于追踪数据的变化
• 组件中使用的方法

//在vue的组件中，使用store中的状态值的话，首先引入mapState这个方法
import {mapState} from "vuex"
//然后在computed属性里面解构这个方法
//假设有一个count的状态
...mapState({
    count:state=>{
        return state.count
    }
})  

• 同理mutations和actions的使用方法

<template>
<div>
{{count}}
<button @click='handleClick'>点击</button>
</div>
</template>

<script>
import {mapMutations , mapActions} from "vuex"
export default {
     methods:{
    ...mapMutations(['add']),
    ...mapActions(['watchAdd']),
   async  handleClick(){
        this.$store.commit('add')
        const data=await this.$store.commit('watchAdd')//异步获取actions中的数据
    }
}  
}
</script>