(轉)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>
(轉)vuex2.0 基本使用(1) --- state