vuex2.0 基本使用(1) --- state

　　Vuex 的核心是 store, 它是一個經過 Vuex.Store 構造函數生成的對象。爲何它會是核心呢？由於咱們調用這個構造函數建立store 對象的時候，給它傳遞參數中包裝了state, mutation , action 等核心內容。看一下官網的例子

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

　　Vuex 的思想是 當咱們在頁面上點擊一個按鈕，它會處發(dispatch)一個action, action 隨後會執行(commit)一個mutation, mutation 當即會改變state,  state 改變之後,咱們的頁面會state 獲取數據，頁面發生了變化。 Store 對象，包含了咱們談到的全部內容，action, state, mutation，因此是核心了。

　　state:  When we say state we are talking about a group of dozens of variables to store data, 就是咱們頁面中用到的各類變量。在寫vue 頁面中，咱們常常寫 {{mes}}, mes 就是一個狀態，由於它變化，頁面就會從新渲染，頁面也會發生改變，改變就意狀態改變了。

　　寫一個簡單的小項目體驗一下, 這裏用vue-cli webpack-simple

　　　　1, vue init webpack-simple count, count 是項目文件名。

           2，cd count  &&  cnpm install  &&  npm run dev, 能夠看到大的vue logo ，證實項目啓動成功。

           3，webpack-simple默認沒有安裝vuex, 因此要安裝vuex; 在命令行中按兩次ctrl+c 結束服務器，cnpm install  vuex –save  安裝vuex.

           4, 打開app.vue，刪除掉除圖片在內的全部內容。

           5，在src 目錄下新建一個display.vue 組件，用於展現；新建一個increment 組件進行操做。

　　display.vue:

<template>
    <div>
        <h3>Count is 0</h3>
    </div>
</template>

<script>
    
</script>

<style scoped>
    h3 {
        font-size: 30px;
    }
</style>

　　increment.vue

<template>
    <div>
        <button>+1</button>
        <button>-1</button>
    </div>
</template>

<script>
    
</script>

<style scoped>
    button  {
        width: 100px;
        height: 100px;
        font-size: 30px;
    }
</style>

app.vue 

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <display></display>
    <increment></increment>
  </div>
</template>

<script>
import display from "./display.vue";
import increment from "./increment.vue";

export default {
  data () {
    return {
      
    }
  },
  components: {
    display,
    increment
  }
}
</script>

<style>
  #app {
    text-align: center;
  }
</style>

項目很簡單，就是單擊按鈕+-1. 能夠想到，咱們這個項目中只有一個變量，就是count, 如今它是0.

　　 用vuex 進行狀態管理，store 是vuex的核心，因此命名爲store.js. 在src 目錄下新建store.js 文件（以下）。能夠看到使用vuex 以前，要告訴 vue 使用它，Vue.use(Vuex); 咱們這裏只有一個變量count 須要管理，因此在建立 store 對象的時候，給構造函數傳參，state 下面只有一個count, 且初始化爲0。

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        count:0
    }
})

export default store

　　如今全部的狀態,也就是變量都放到了store.js中，那咱們組件怎麼才能獲取到狀態修值呢？這裏有兩個步驟須要操做

　　　　1， vue 提供了注入機制，就是把咱們的store 對象注入到根實例中。vue的根實例就是 new Vue  構造函數，而後在全部的子組件中,this.$store 來指向store 對象。在store.js 中，咱們export store, 把store已經暴露出去了，new Vue() 在main.js中，因此直接在main.js 中引入store  並注入便可。

import Vue from 'vue'
import App from './App.vue'

import store from "./store.js"  // 引入store 對象

new Vue({
  el: '#app',
  store,  // 注入到根實例中
  render: h => h(App)
})

　　2， 在子組件中,用computed 屬性, computed 屬性是根據它的依賴自動更新的。因此只要store中的state 發生變化，它就會自動變化。在display.vue 中做下面的更改， 子組件中 this.$store 就是指向store 對象。咱們把 store.js 裏面的count 變爲8, 頁面中就變爲了8。

<template>
    <div>
        <h3>Count is {{count}}</h3>
    </div>
</template>

<script>
    export default {
        computed: {
            count () {
                return this.$store.state.count  
            }
        }
    }
</script>

　　3， 經過computed屬性能夠獲取到狀態值，可是組件中每個屬性（如：count）都是函數,若是有10個，那麼就要寫10個函數，且重複寫10遍return this.$store.state，不是很方便。vue 提供了 mapState 函數，它把state 直接映射到咱們的組件中。

固然使用mapState 以前要先引入它。它兩種用法，或接受一個對象，或接受一個數組。仍是在display.vue 組件下。

　　對象用法以下：

<script>
    import {mapState} from "vuex";  // 引入mapState 

    export default {
　　　　　　// 下面這兩種寫法均可以
        computed: mapState({
            count: state => state.count   // 組件內的每個屬性函數都會得到一個默認參數state, 而後經過state 直接獲取它的屬性更簡潔     
            count: 'count'　　　　　　　　　// 'count' 直接映射到state 對象中的count, 它至關於 this.$store.state.count,
        })
    }
</script>

　　數組方式：上面的第二種方式count: 'count'，仍是有點麻煩，由於要寫兩遍。若是咱們組件中的屬性和state 中的屬性名稱同樣，咱們不想更名字，那就把直接把屬性名寫在數組中。

<script>
    import {mapState} from "vuex";

    export default {
        computed: mapState([   // 數組
            "count"
        ])
    }
</script>

　　4,  還有最後一個問題，若是咱們組件內部也有computed 屬性怎麼辦？它又不屬於mapState 中。那就用到了對象分割，把mapState函數生成的對象再分割成一個個的，就像最開始的時候，咱們一個一個羅列計算屬性，有10個屬性，咱們就寫10個函數。

es6中的... 就是分割用的，可是隻能分割數組。在ECMAScript stage-3 階段它能夠分割對象，因此這時還要用到babel-stage-3;  npm install babel-preset-stage-3 --save-dev, 安裝徹底後，必定不要忘記在babelrc 就是babel 的配置文件中，寫入stage-3,

不然一直報錯。在頁面中添加個 p 標籤，顯示咱們組件的計算熟悉

babelrc 

{
  "presets": [
    ["env", {
      "es2015": { "modules": false }
    }],
    "stage-3"   // 必定不要忘記
  ]
}

display.vue 組件更改後

<template>
    <div>
        <h3>Count is {{count}}</h3>
        <p>組件本身的內部計算屬性 {{ localComputed }}</p>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    export default {
        computed: {
            localComputed () {
                return this.count + 10;
            },
            ...mapState({
                count: "count"
            })
        } 
    }
</script>

 把store.js 中state.count 改成20,  查看一個效果