vuex插件

 

 

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

官方文檔

這個狀態自管理應用包含如下幾個部分：

• state，驅動應用的數據源；
• view，以聲明方式將 state 映射到視圖；
• actions，響應在 view 上的用戶輸入致使的狀態變化。

在全局單例模式管理下，咱們的組件樹構成了一個巨大的視圖；無論在樹的哪一個位置，任何組件都能獲取狀態或者觸發行動。

經過定義和隔離狀態管理中的各類概念並經過強制規則維持視圖和狀態間的獨立性，咱們的代碼將會變得更結構化且易維護。

 

 

 

在使用vuex的時候，首先要在項目目錄下 npm install vuex --save（下載vuex，並在package.json上有顯示）

而後與components同一級目錄下建立一個store的文件夾；文件夾下面是store.js;

 

 

 而後在store.js文件中；首先導入vue和vuex；

還有vuecookies 就是把數據放入客戶端的cookies中，從而使數據變得可持久化；

Vuex 經過 store 選項，提供了一種機制將狀態從根組件「注入」到每個子組件中（需調用 Vue.use(Vuex)）：

import vuex from 'vuex'
import Vue from 'vue'
import vuecookies from 'vue-cookies'


Vue.use(vuex);
Vue.use(vuecookies);


export default new vuex.Store({
  state: {
    username: vuecookies.get('username'),
    token: vuecookies.get('token'),
    //存放的數據能夠供全局使用；
    apilist: {
      login: 'http://127.0.0.1:5000/login',
      register: 'http://127.0.0.1:5000/register'
    },
    house_data:vuecookies.get('house_data'),
    city:vuecookies.get('city')
  },
  mutations: {
    //這裏存的數據是暫時的，一刷新後就消失了，所以必須把數據保存到cookies裏面去。
    changeuser(state, data) {
      //頁面不刷新
      state.username = data.username;
      state.token = data.token;
      //當刷新頁面的時候就到cookies中取值
      vuecookies.set('username', data.username, '20min');
      vuecookies.set('token', data.token, '20min')
    },
    deleteUser(state) {
      //刪除的話也要刪除cookies裏面
      state.username = '';
      state.token = '';
      vuecookies.remove("username");
      vuecookies.remove("token")
    },
    putdata(state,data) {
      //把後端傳入過來的數據放入到cookies中
      state.house_data = data;
      vuecookies.set('house_data', data, '2day');
    },
    city(state,data) {
      //把後端傳入過來的數據放入到cookies中
      state.city = data;
      vuecookies.set('city', data, '2day');
    }
  },
  actions: {
    changeuser(context, data) {
      context.commit('changeuser', data)
    },
    deleteUser(context){
      context.commit('deleteUser')
    },
    putdata(context,data){
      context.commit('putdata',data)
    },
    city(context,data){
      context.commit('city',data)
    }
  }
})

　

最後還要掛載到vue對象中；

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import store from'./store/store'
// import 'bootstrap'


Vue.config.productionTip = false;

//在vue的全局變量中設置了$axios = axios
Vue.prototype.$axios = axios;
// 之後在每一個組件中使用時： this.$axios



/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});

經過在根實例中註冊 store 選項，該 store 實例會注入到根組件下的全部子組件中，且子組件能經過 this.$store 訪問到

 

axios相似於ajax同樣能夠發送請求；

axios基於 Promise 的 HTTP 請求客戶端，可同時在瀏覽器和 node.js 中使用

在vue的全局變量中設置了Vue.prototype.$axios = axios;這樣就能夠在組件中這樣的調用this.$axios

var that = this;
this.$axios.request({
        url: 'http://127.0.0.1:5000/house',
        method: 'get',
      }).then(function (arg) {
        if (arg.data.code === 1000) {
          console.log("data", arg.data.data, typeof arg.data.data);
          // console.log("data",arg.data.data.newhouse,typeof arg.data.data.newhouse);
          that.$store.dispatch('putdata', arg.data.data);
        }
      })

爲何要Var that = this呢，這是由於在axios.request中有this對象；因此此時的This對象不是咱們Vue的對象；全部須要從新定義爲that，而後that 就表明了vue對象；

　　

使用store的時候，須要使用數據就在store.state中；

更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation

這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變動狀態
      state.count++
    }
  }
})

　

不能直接的調用mutation方法;而是要經過：

store.commit('increment')

　　

調用的時候是能夠傳入數據的；

mutation 都是同步事務

 

Action 相似於 mutation，不一樣在於：

• Action 提交的是 mutation，而不是直接變動狀態。
• Action 能夠包含任意異步操做。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state,data) {
      state.count++
    
    }
  },
  actions: {
    increment (context) {
      context.commit('increment'，data)
    }
  }
})

　　

Action 經過 store.dispatch 方法觸發：

store.dispatch('increment')

mutation 必須同步執行這個限制麼？Action 就不受約束！咱們能夠在 action 內部執行異步操做

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}