vuex 基礎介紹

vuex 基礎

安裝

直接下載 / CDN 引用

https://unpkg.com/vuex

Unpkg.com 提供了基於 NPM 的 CDN 連接。以上的連接會一直指向 NPM 上發佈的最新版本。您也能夠經過 https://unpkg.com/vuex@2.0.0 這樣的方式指定特定的版本。

在 Vue 以後引入 vuex 會進行自動安裝：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

NPM

npm install vuex --save

Yarn

yarn add vuex

在一個模塊化的打包系統中，您必須顯式地經過 Vue.use() 來安裝 Vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

當使用全局 script 標籤引用 Vuex 時，不須要以上安裝過程。

本身構建

若是須要使用 dev 分支下的最新版本，您能夠直接從 GitHub 上克隆代碼並本身構建。

git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
npm install
npm run build

Vuex 是什麼？

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。
    
    它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
    
    Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

狀態【數據】管理

因爲多個狀態分散的跨越在許多組件和交互間各個角落，大型應用複雜度也常常逐漸增加。

爲了解決這個問題，Vue 提供 vuex：咱們有受到 Elm 啓發的狀態管理庫。

vuex 甚至集成到 vue-devtools，無需配置便可訪問時光旅行。

<div id="app"></div>
    <template id="tpl">
        <div>
            <tip :num="count"></tip>
            <input type="button" value="+" @click="count++"/>
            <input type="button" value="-" @click="count--"/>
        </div>
    </template>
<!--   狀態 【數據】管理
    data                -->
    <script>
    new Vue({
        el:"#app",
        //state
        data () {
            return {
                count: 0      //狀態
            }
        },
        //view
        template:"#tpl",
        components:{
            
            tip:{
                props:["num"],
                template:"<div>{{num}}</div>"
            }
        }
    });
    
    </script>

vuex有6個概念

Store 用來存儲數據(狀態)

安裝 Vuex 以後，讓咱們來建立一個 store。建立過程直截了當——僅須要提供一個初始 state 對象和一些 mutations：

var store = new Vuex.Store({
            state:{
                count:0
            },  
        mutations:{
            jia:function(state){
                state.count++;
            },
            jian(state){
                state.count--;  
            }
        }
    });    

    store.commit("jia");
    store.commit("jia");
    store.commit("jia");

    console.log(store.state.count);

能夠經過 store.state 來獲取狀態對象，以及經過 store.commit 方法觸發狀態變動：

store.commit("jian");
    store.commit("jian");

        console.log(store.state.count);

咱們經過提交 mutation 的方式，而非直接改變 store.state.count，是由於咱們想要更明確地追蹤到狀態的變化。

// store   用來存儲數據(狀態)
    state:{
        count:1
    }
    // 經過 mutations 改變數據
    mutations:{
        jia(state){
        }
    }
    // 讀數據
    store.state.count

State 數據

那麼咱們如何在 Vue 組件中展現狀態呢？因爲 Vuex 的狀態存儲是響應式的，從 store 實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態：

var store=new Vuex.Store({
        state:{
            count:0
        },
        mutations:{
            jia(state){
                state.count++;
            },
            jian(state){
                state.count--
            }
        }
    });
    new Vue({
        el:"#app",
        template:"#tpl",
        components:{
            tip:{
                template:"<div>{{$store.state.count}}</div>"
            },
            oper:{
                template:`<div><input type="button" value="+" @click="$store.commit('jia')"/>
                          <input type="button" value="-" @click="$store.commit('jian')"/></div>`
            }
        },
        store
    });

Getters 計算屬性

有時候咱們須要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾並計數：

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

Vuex 容許咱們在 store 中定義getters（能夠認爲是 store 的計算屬性）。就像計算屬性同樣，getters的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

Mutations 改變數據

mutations 與事件相似，更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。因此 mutations 上存放的通常就是咱們要改變 state 的一些方法。

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

能夠在組件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函數將組件中的 methods 映射爲 store.commit 調用（須要在根節點注入 store）。

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment' // 映射 this.increment() 爲 this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' // 映射 this.add() 爲 this.$store.commit('increment')
    })
  }
}

Actions

在mutation 中混異步調用會致使你的程序很難調試。

　　　　Action 相似於 mutation,不一樣在於。

　　　　Action 提交的是 mutation ,而不是直接變動狀態。

　　　　Action 能夠包含任意異步操做。

　　　　註冊一個簡單的 action

const store = new Vuex.Store({

　state: {

　    count：0

　}，

　mutations: {

　　　increment (state) {

　　　　    state.count++
　　　}
　},
　　actions: {

　　　　　increment (context){

　　　　　　　context.commit('increment')

　　　　　　　}
　　　　}
})