vuex

1.什麼是vuex?

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

2.爲何須要vuex

當應用較簡單時，組件之間的通訊以及交互不會不少，組件間通訊便可解決數據共享的問題。可是當應用足夠複雜，多個組件共享一個狀態的時候，組件通訊會十分繁瑣混亂而且不易管理。此時把組件的共享狀態抽取出來，以一個全局單例模式管理，在這種模式下，咱們的組件樹構成了一個巨大的「視圖」，無論在樹的哪一個位置，任何組件都能獲取狀態或者觸發行爲，這樣就能夠實現狀態的高效管理，而且代碼更容易維護

3.store

每個 Vuex 應用的核心就是 store（倉庫）。「store」基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。 Vuex Store是響應式的，當Vue組件從store中讀取狀態（state選項）時，若store中的狀態發生更新時，他會及時的響應給其餘的組件（相似雙向數據綁定） 並且不能直接改變store的狀態，改變狀態的惟一方法就是，顯式地提交更改commit（mutations選項）

vuex 的dispatch和commit提交mutation的區別

當你的操做行爲中含有異步操做，好比向後臺發送請求獲取數據，就須要使用action的dispatch去完成了，其餘使用commit便可。 這裏不經過直接修改store.state的值，而是經過提交mutation去變動，主要是爲了使得整個數據的變動能夠追蹤。

4.state：用來存放組件之間共享的數據。

他跟組件的data選項相似，只不過data選項是用來存放組件的私有數據。 讀取狀態：
computed: { totalPrice (){ return this.$store.state.totalPrice; } }, 或者採用輔助函數mapstate, computed: { ...mapState([ 'totalPrice' ]), }, 由於Vuex 經過 store 選項，提供了一種機制將狀態從根組件「注入」到每個子組件中

//vuex store
import store from './store/';

const appAdmin = new Vue({
    el    : '#app',
    data() {
        return {};
    },
    router,
    store,
    render: h => h(App)
})
複製代碼

getters：有時候，咱們須要對state的數據進行篩選，過濾。這些操做都是在組件的計算屬性進行的。若是多個組件須要用到篩選後的數據，那咱們就必須處處重複寫該計算屬性函數；或者將其提取到一個公共的工具函數中，並將公共函數多處導入 - 二者都不太理想。若是把數據篩選完再傳到計算屬性裏就不用那麼麻煩了，getters就是幹這個的，你能夠把getters當作是store的計算屬性。getters將store的state中的值從新計算後供整個應用使用.getters下的函數接收接收state做爲第一個參數。那麼，組件是如何獲取通過getters過濾的數據呢？

過濾的數據會存放到$store.getters對象中。具體看一個例子：

module.exports = {
    getUserinfo(state) {
        return state.userinfo;
    },

    getToken(state) {
        return state.userinfo && state.userinfo.token ? state.userinfo.token : '';
    },

    getRemumber(state){
        return state.remumber;
    }
};
複製代碼

5.Mutation

每個mutation都會有一個事件的type和callback，當咱們store.commit(‘plus’)一個事件後，vuex會根據它的type(plus)，而後調用相應的callback執行增長的操做，而後去變動倉庫中的狀態。

Mutation 必須是同步函數 這個是mutation中最重要的一點，若是你在mutation中有異步的回調，那麼追蹤記錄就不可能了，這樣就破壞了vuex的初衷。

6.Action

action就是異步提交mutation。Action 經過 store.dispatch 方法觸發, action也是支持嵌套的,是由於store.dispatch 能夠處理被觸發的 action 的處理函數返回的 Promise，而且 store.dispatch 仍舊返回 Promise。

this.$store.dispatch('update_userinfo');
import * as types from './mutations_types';
module.exports = {
    update_userinfo: ({commit}, {userinfo}) => {
        return new Promise((resolve, reject) => {
            commit(types.UPDATE_USERINFO, {
                userinfo
            });
            resolve()
        });
    },

    remove_userinfo: ({commit}) => {
        return new Promise((resolve, reject) => {
            commit(types.REMOVE_USERINFO);
            try {
                resolve()
            }catch(e){
                console.log(e);
            }

        });
    },
複製代碼

經過狀態集中管理驅動組件的變化，也就是集中的存儲管理應用的全部組件的數據以及狀態等。

在項目中應用：

安裝npm install vuex --save-dev

import Vuex from 'vuex';
Vue.use(Vuex);

    Vue.use(Vuex);//在建立Vue實例以前
   var myStore =  new Vuex.Store({
        state:{
            //存放組件之間共享的數據
            name:"jjk"
        },
         mutations:{
             //顯式的更改state裏的數據
         },
         getters:{
             //獲取數據的方法
         },
         actions:{
             //
         }
    });
    new Vue({
        el:"#app",
        data:{
            name:"dk"
        },
        store:myStore,
        mounted:function(){
            console.log(this)//控制檯
        }
    })
複製代碼

須要注意的問題：

因爲vue是單頁面應用，咱們在項目的入口文件main.js註冊使用vuex來管理全局變量。可是當咱們刷新頁面時，全局變量就會初始化，致使拿不到咱們想要的值。爲了解決這個問題，咱們在將全局須要用到的vuex的狀態（例如用戶登陸的信息）存放在localstorage裏，便可解決。將store對象的構造函數重寫，將this.stroe指向local storage，而後設置set和get方法分別存取local storage 的內容。