之前一直不理解vuex用于哪些方面，现在了解了，其实就类似于不同页面之间的传值，以前我们会用？key=value通过地址栏来传值，当然在vue中也可以通过地址栏传值，而现在我们也可以通过vuex来做数据传递和修改，其实就是把store当做一个仓库，当一个页面的值改变时，另一个页面的这个值也相应改变，而这个值的修改，是在store中统一做修改的。

例子如下：该例子是略过actions直接让组件调用mutations，多用于值的同步改变，而值的异步改变可通过actions来做

store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'
import mutations from './mutations.js'
Vue.use(Vuex)

//通过vuex创建一个仓库，仓库中包含state,actions,nutations
export default new Vuex.Store({
    state:state,
    mutations:mutations
})

store/state.js:这里用了localStorage，用来解决网页刷新后数据为默认值的问题

//有的用户可能会关闭本地存储，如果关闭的话用localStorage会报错
let defaultCity = '上海'
try{
    if(localStorage.city)
    {
        defaultCity = localStorage.city
    }
}catch(e){}

export default {
    city:defaultCity
}

store/mutations.js:

export default {
    //mutations主要放的是同步的对数据的改变
    //当mutations很复杂的时候，可以借助Module对mutations,state,actions进行拆分
    changeCity(state,city)
    {
        state.city = city
        try{
            localStorage.city = city
        }catch(e){}    
    }
}

在组件里取值和修改值：

import { mapState,mapMutations } from 'vuex'

export default{

name:"list"，

computed:{
      //扩展运算符:...,mapState是指把vuex里的数据映射到此组件的计算属性里,即把公用数据city映射到计算属性的city中
      ...mapState(['city']),    //取值
  }

methods:

{

updateCity()

{

this.changeCity(city)

},

...mapMutations(["changeCity"])   //修改值

}

}

这三者一致