vue的狀態管理vuex

vuex的作用，vuex就是存儲數據，類似於cookie，sessionStorage，localStorage將網頁上是一些數據存儲下來，以便於複用。

但是上面舉了那麼多的例子，爲什麼不用cookie，sessionStorage，localStorage，偏偏用Vuex？

當我滿倆個組件都擁有一個共同的對象A，如果一個對象改變了對象A，我們需要另外一個對象也跟着變化的時候，這個時候我們就用到了vuex，正是這一點，其他的存儲方式不能夠比的。如圖一圖二所示

                                 

                     圖1                                                                                                   圖2 

1、安裝

npm install vuex --save

2、創建store.js

export default new Vuex.Store({
  state: {
    city: '上海'
  },
  mutations: {
    changeCity (state, city) {
      state.city = city
    }
  }

3、main.js引入

//vuex
import store from './store/store.js'


new Vue({
  el: '#app',
  router,
  store: store, 
  components: { App },
  template: '<App/>'
})

4、輸入store.js的值

<div>{{this.$store.state.city}}</div>
<button @click="click(3)">提交</button>

5、方法裏面修改store.js的值

click:function(value){
     //axios存儲
     this.$store.commit('changeCity', value);
 }

6、mutations裏面修改storge的值

let defaultCity = '上海'
// 添加try防止用戶本地緩衝異常或者隱身模式，導致異常
try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {}
export default new Vuex.Store({
  state: {
    city: defaultCity
  },
  mutations: {
    changeCity (state, city) {
      state.city = city
      try {
        localStorage.city = city
      } catch (e) {}
    }
  }
})