state：所有的公用数据都放在state中。要想使用，直接调用state

修改state：

一：改变state中的数据，不能直接让组件修改，必须走流程：如果有异步操作或者复杂的同步操作，直接将操作放在actions中，组件先调用actions（使用dispath方法），然后调用mutations（使用commit方法）。mutations中放着一个一个的同步对state的修改。

二：当没有任何的异步操作，操作非常简单，不是批量的数据操作时，可以略过调用actions 直接调用mutations来改变state的值。

npm install vuex --save

vuex的简单使用：

一：使用state中的值

this.$store.state.name

二：改变state中的值

方法一：

组件中写：(组件中用dispatch调用actions中的方法)

this.$store.dispatch("changeName",name)

actions中写：(actions中紧接着用commit调用mutations中的方法)

changeName(ctx,name){
    ctx.commit("changeName",name)
}

mutations中写：（mutations中就可以改变state中的值）

changeName(state,name){
    state.name = name
}

方法二：（当没有任何的异步操作，操作非常简单，不是批量的数据操作时，可以使用方法二）

组件中写：(没有复杂的操作，可以略过actions方法，直接用commit调用mutations中的方法)

this.$store.commit("changeName",name)

mutations中写：（mutations中就可以改变state中的值）

changeName(state,name){
    state.name = name
}

vuex的高阶使用：

一：在组件中使用state中的值

mapState是指把vuex中的数据映射到组件中computed的计算属性里（即：将公用数据name映射到组件的名字叫name的计算属性中）

this.name

import {mapState} from 'vuex'
export default {
    computed:{
        ...mapState(['name'])
    }
}

一：改变state中的值

有一个mutations为changeName，把mutations映射到组件中的名字叫做changeName方法里。

import {mapMutations} from 'vuex';

methods:{
    handleNameClick(city){
        this.changeName(city)
    },
    ...mapMutations(['changeName'])
}

mutations中写：（mutations中就可以改变state中的值）

changeName(state,name){
    state.name = name
}

vuex中的getters的作用类似于组件中computed的计算属性。当我们需要根据state中的数据算出一些新的数据时，可以借助使用getters。这样可以避免数据的冗余。

在组件中使用

在vuex中写