vuex使用之state訪問狀態對象
阿新 • • 發佈:2017-08-18
計算屬性 rom com 令行 bsp turn strong pst 屬性
引入vuex
1.利用npm包管理工具,進行安裝 vuex。在控制命令行中輸入下邊的命令就可以了。
npm install vuex --save
需要註意的是這裏一定要加上 –save,因為你這個包我們在生產環境中是要使用的。
2.新建一個vuex文件夾(這個不是必須的),並在文件夾下新建store.js文件,文件中引入我們的vue和vuex。
import Vue from ‘vue‘;
import Vuex from ‘vuex‘;
3.使用我們vuex,引入之後用Vue.use進行引用。
Vue.use(Vuex);
一、通過computed的計算屬性直接賦值
computed屬性可以在輸出前,對data中的值進行改變,我們就利用這種特性把store.js中的state值賦值給我們模板中的data值。
computed:{
count(){
return this.$store.state.count;
}
}
二、通過mapState的對象來賦值
我們首先要用import引入mapState。
import {mapState} from ‘vuex‘;
然後還在computed計算屬性裏寫如下代碼:
computed:mapState({
count:state=>state.count
})
三、通過mapState的數組來賦值
computed:mapState(["count"])
vuex使用之state訪問狀態對象