Vuex有哪些属性？

vuex是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间的数据共享

使用vuex管理数据的好处：

• 能够在vuex中集中管理共享的数据，便于开发和后期进行维护
• 能够高效的实现组件之间的数据共享，提高开发效率
• 存储在vuex中的数据是响应式的，当数据放生改变时，页面中的数据会同步更新

vuex中的数据和data中的数据与什么区别？

• vuex中的数据是全局的，共享的，data中的数据是私有的
• vuex中的数据是响应式的，只要vuex中的数据发生改变，引用vuex中的数据的文件会同步更新
• vuex中的数据是单向的，想要修改vuex中的数据必须在mutation中修改

vuex有哪些属性？

state---提供唯一的公共数据源，所有共享的数据都要统一放到strore中的state中存储

组件访问state中的数据又两种方式：

//组件访问state中数据的第一种方式
this.$store.state.全局数据名称


//组件访问state中数据的第二种方式
//1.先按需导入 mapState函数 
import {mapState} from 'vuex'
//2.使用展开运算符将全局的数据映射为当前组件的一个计算属性
computed:{
  ...mapState(['全局数据的名称'])  
}

mutation---用于修改变更$store中的数据

• store中在state中存储的数据只能在mutation中修改，其余任何地方都不能够修改
• 在mutation中不能编写异步的代码，只能够执行同步的代码

mutation使用方式：

mutation:{
    //不传递参数的形式
    add(state){
        //第一个形参永远都是state，也就是$state对象
        //第二个形参是调用add时传递的参数
        state.count++
    }
    
    //传递参数的形式
    add(state,step){
        //第一个形参永远都是state，也就是$state对象
        //第二个形参是调用add时传递的参数
        state.count += step
        
    }

}

<button @click='Add'>+1</button>
methods:{
    Add(){
        //使用commit函数调用mutations中的对应函数
        //第一个参数是我们要调用的mutations中的函数名
        //第二个参数是要传递给add函数的参数
        this.$store.commit('add',10)

    }

}

Action---执行异步操作

Action的使用方式1---this.$store.dispatch()是触发 actions 的第一种方式

Action的使用方式2:  

1. 按需导入 mapActions函数   

2. 将指定的actions函数，映射为当前组件的 methods 函数

import {mapActions} from 'vuex'

methods:{

    ...mapActions(['subAsync']),
    this.subAsync()

}

//第二种导入方式可以直接在html结构中使用，也就是可以直接写在@click所对应的事件中，
<button @click='subAsync'>点击-1</button>

Getter---用于对store中的数据进行加工处理形成新的数据，但只是对store中的数据包装，以另外一中形式返回出来

Getter只会包装store中保存的数据，并不会修改store中保存的数据，当store中的数据发生变化时，Getter生成的内容也会随之变化

//Getter的使用方式1
export default new Vuex.Store({

    ...
    getters:{
        //添加了一个showNum的属性
        showNum: state=>{

            return '最新的count值为：'+ state.count;
        }

    }

})

//在Addition.vue中,添加插值表达式使用getters

{{$store.getters.showNum}}