1. 程式人生 > >vuex使用之state訪問狀態對象

vuex使用之state訪問狀態對象

計算屬性 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訪問狀態對象