vue學習筆記

時間 2019-11-26

標籤 vue 學習筆記简体版

原文原文鏈接

npm - 換淘寶源css

Node 的模塊管理器 npm 會一塊兒安裝好。因爲 Node 的官方模塊倉庫網速太慢，模塊倉庫須要切換到阿里的源。
npm config set registry https://registry.npm.taobao.org/html

執行下面的命令，確認是否切換成功。
npm config get registry前端

VUE組件說明：
1.全局組件：寫在new Vue外面的組件
例：Vue.Component('標籤名'),{
template:'要作成組件的HTML結構'
}
2.局部組件：寫在new Vue內的組件
例：new Vue({
components:{
'組件名':{
template:'要作成組件的HTML結構'
}
}
})vue

組件說明：vue中的組件就是自定義標籤
命名規範：駝峯命名法（coutSon）
烤串命名法(cou-son)node

組件的通訊：
1.父組件-->子組件
組件實例的做用域是孤立的，不能在子組件直接用父組件的數據；
處理辦法：
能夠在組件上使用自定義屬性綁定數據，在組件中須要顯式用props聲明自定義屬性名；
2.子組件-->父組件
處理辦法：
須要用到自定義事件，父組件用$on監聽自定義事件，$emit觸發父組件所關心的自定義事件。webpack

父組件-->子組件
例：
<con-son btn-value="玩"></con-son>
Vue.component('conSon'){
props:['btnValue'],//這裏的名字不能夠是烤串形式，必須是駝峯
template:'html結構'
}git

props是專門綁定組件中自定義屬性的；es6

子組件-->父組件
方法步驟：
1>建立一個變量val在父組件中，用於接收子組件的值；val='';
2>將val綁定到父組件要顯示的input中
<input :value='val'/>
3>子組件的自定義標籤中，添加自定義事件；
<list-cus @receive='selectValue'></list-cus>
4>子組件中的元素(li)加點擊事件，並經過vue自帶監聽事件，監聽並回調要傳的值；
<li v-for='item in listDate' @click='changeVlaue(item)'></li>
methods:{
changeValue(item){
this.$emit('receive',item);
}
}
5>在父組件中的methods事件中寫selectValue方法，方法中會傳入value的值
methods:{
selectValue(value){
this.val=value;
//將最終獲得的選項值賦給val顯示到頁面中
}
}
備註：$emit(str1,[str2])
str1:自定義事件名
str2:要傳入的參數，能夠是多個
觸發當前實例上的事件，附加參數都會傳給監聽器回調；
這裏的監聽器能夠理解爲，子組件標籤身上的自定義事件；web

單向數據流
父組件向子組件傳遞數據，子組件不能夠直接更改父組件的數據；
解決辦法：
1>子組件能夠經過自身組件中的data屬性，來介接的改變父組件的數據；
2>也能夠經過computed屬性(計算屬性)來改變父的數據；ajax

props驗證：
例：props:{
自定義屬性名：{
type:Number,//設置類型 ---->>type:[String,Number]//類型也能夠是多種
default:10,//設置默認值[可填]
required:true,//設置是否必填[可填]
}
}
自定義驗證：
props:{
test(自定義屬性名)：{
validator:function(value){
retrun value>10;
//value,是test綁定對應的數據的值；
//return 驗證規則，直接寫retrun true驗證直接經過；若是寫規則邏輯就按邏輯走；
}
}
}

使用slot分發內容
使用一種方式混合組件內容與子組件本身的模版，這個過程稱爲"內容分發"。

何時使用slot：
當寫在自定義標籤之間的內容，要混合子組件中的模版，這時就須要slot；
例：
一.單項替換
<custom>
<div>我是插入內容</div>
</custom>

template:`
<div>
<slot>這裏能夠是默認顯示的內容，插入內容會替換到這裏</slot>
</div>
`
二.名字替換
slot也能夠經過名字指定插入位置
如：<slot name="one"><p>要替換的標籤</p></slot>
對應在父組件中寫法：
<custom>
<div slot="one">替換p標籤的內容</div>
</custom>

當組件中須要替換同一個slot多的內容，可使用<template></template>標籤。
例：
<template slot="one">
<div>內容1</div>
<div>內容2</div>
</template>

編譯做用域：<slot>
父組件模版在父組件中編譯；
子組件模版在子組件中編譯；

封裝組件：
組件的特色：重用性、可定製性、高內聚性、互操做性！

使用組件，is的特殊屬性：
當使用DOM做爲模版時，會遇到因爲W3C結構標準的限制，使用is屬性能夠將組件套用到任意標籤中；
例：組件加到<table>標籤中
<table>
<custom></custom>
</table>
這樣的寫法，頁面加載後，會將組件自動拿出table；
-------------------------------------------------------------
使用is的方法：
<table>
<tr is="custom"> </tr>
</table>
這樣加載後，custom標籤會替換到tr標籤的位置。

組件運行順序：
頁面加載會先加載組件的自定義標籤，而後再運行VUE中的template裏的html結構，最後再自定義標籤(組件)中。

組件中的data說明：
組件中的data這個屬性，用來放數據用的，data必須是一個函數，由於只有函數形式，每一個組件的數據相互不會影響，若是是對象形式，組件之間都使用同一個對象數據，會相互影響；

如上所說寫法：
data:function(){
return {這裏寫正式的數據}
}//在函數中，return一個對象，這樣就不會相互影響了

實戰項目說明
VUE-Cli 腳手架
是VUE的一個工具;
做用：
1.生成目錄結構；
2.完成本地開發調試；
3.在代碼編寫完後，對代碼進行壓縮和部署；
4.利用腳手架的熱加載特性，搞代碼效率；
5.使用單元測試，測試代碼功能；
安裝方法：
1.node 4版本以上，npm在3版本以上
2.先建立一個放vue-cli的文件夾(就是放VUE的項目文件)
3.安裝指令：npm install -g vue-cli
4.檢查是否安裝成功：vue -V（V必須是大寫）
5.下載模版：vue init webpack vue-example
說明：vue-example，是模版文件名，隨便起的；前面的指令爲指定命令；
6.下載過程當中的設置說明：
a.? Project name vue-example ：確認項目名是否爲vue-example，直接回車；
b.？project descript(A Vue.js project)：對vue項目的描述，能夠本身隨便改寫描述，寫完後，直接回車；
c.？Author(WYseven<consoloelog@126.com>)：做者名，能夠本身改，改後，直接回車；
d.？Vue build(Use arrow keys)：顯示一些信息，直接回車；
e.？Install vue-router?(Y/n)：是否加載vue-roter，輸入Y是加載，而後回車；
f.？Use ESLint to lint your code?(Y/n)：是否檢查代碼風格，輸入Y，回車；
g.？Pick an ESLint preset：顯示檢查代碼的一些信息，直接回車；
h.？Setup unit tests with Karma+Mocha？(Y/n)：是否要對代碼進行測試，輸入n，回車；
i.？Setup e2e tests with Nightwatch？(Y/n) ：是否要e2e，輸入n，回車；

以上都輸入後，會顯示須要輸入的一些命令：
cd Vue-example
npm install
npm run dev

按照上面提示的命令，在Vue-example目錄下輸入相應命令便可；

其中npm run dev 爲啓動項目，會在瀏覽器中自動打開項目頁面，http://localhost:8080/#/ 顯示一個這樣連接的頁面，即爲項目建立成功；

項目文件目錄說明：
一級文件目錄說明：
1.buil：webpack相關文件；
2.config：生產環境和開發環境的配置參數；
3.node_modules：第三方依賴；
4.src：項目源碼文件，vue後綴的文件爲，單文件組件
，這個文件裏的代碼，會被webpack進行處理；
5.static：放置第三方資源，其中有.gitkeep，須要上傳空白文件夾時，須要在文件後綴寫.gitkeep
6..babelrc：配置瀏覽器不支持的ES6新語法的轉換；
1）presets:預設，語法放轉換的插件；
如：env是ES6轉換成ES5的插件；
stage-2 草案階段；
2）plugins：配置方法轉換插件；
如：transform-runtime：ES6方法轉換成ES5方法；
3）comment：轉換後代碼上是否增長註釋，flase爲不增長；
4）env：test使用測試的時候使用的；
7..editorconfig：配置編輯器的格式風格等；
如：文件編碼；
8..eslintignore：代碼檢查時，設置須要忽略的文件；
默認忽略：build/*.js config/*.js
9.eslintrc.js：代碼風格檢查；
10..gitgnore：使用git提交項目時，忽略指定文件和文件夾；
11..postcssrc.js：設置css的一些規則；
12.index.html：項目運行的模版
13.package.json：項目的一些配置；
14.README.md：對項目的使用說明；

vue-router
什麼是前端路由：
在web開發中，路由是指根據url分配到對應的處理程序。
做用：
經過管理url，實現url和組件的對應和經過url進行組件之間的切換。

單頁應用
加載單個HTML頁面，並在用戶與應用程序交互時動態更新該頁面；

使用vue-router方法：
安裝模塊：
npm install vue-router --save
引入模塊：
import VueRouter form 'vue-router'
做爲Vue的插件
Vue.use(VueRouter)
建立路由實例對象
new VueRouter({--配置參數})
注入Vue選項參數
new Vue({router})
告訴路由渲染的位置
<router-view></router-view>

路由配置與建立的代碼，都放到src下的router文件中，便於查找；

vue-router:中的hash模式與history模式
語法：mode:'history',
注：通常都是使用history模式，history模式適用於高版本；

history模式不支持IE8

history模式的好處：
使用history模式，跳轉後的頁面連接，會自動保存到瀏覽器中，可使用瀏覽器自帶的前進後退功能，回到以前打開過的頁面；

<router-view class="center"></router-view>

注：若是在單組件元素中，設置的class名，是不會被router-view中的替換，會追加；

router-link:各類配置項
頁面渲染結果：
默認router-link會渲染成a標籤；

使用tag屬性：tag="要生成的標籤名"，頁面會生成指定的標籤；而且不須要本身監聽事件，vue-router都自動監聽;

如：<li><i></i><span>home</span></li> 須要給li添加點擊跳轉連接，能夠寫成以下形式：
<router-link :to="{path:'/home'}" tag="li">
<i></i><span>home</span>
</router-link>

router-link中的to屬性：至關於a標籤中的href，此屬性也能夠動態綁定；
如：<router-link :to="index"></router-link>

new Vue({
　　data(){
　　　　index:'/home'
　　}
});

to屬性中能夠傳一個對象的形式：能夠同時寫不少個配置項
如：<router-link :to="{path:'/home'}"></router-link>

router-link點擊時，router會自動添加一個叫router-link-active的樣式名，當咱們須要點擊後，添加必定樣式的時候，能夠去給這個樣式名上，添加樣式；

這個自帶的樣式名router-link-active的class名太長，能夠自定義設置；
設置方法：
方法一：在路由中設置
new VueRouter({
　　linkActiveClass:'要設置的class名' //重置router-link點擊後的class名稱
})
方法二：直接在router-link標籤上設置
<router-link active-class="要設置的class名"></router-link>

重定向和別名：
router-link默認是點擊事件，如何修改默認事件行爲：
在標籤中使用event屬性，寫入事件名，便可修改；以下：
<router-link event="mouseover"></router-link>
這樣就改爲了，鼠標移入事件;

---哪裏須要放哪裏---

當遇到沒有匹配到的路徑時，如何處理：
new VueRouter({
　　routes:[
　　path:'*',//匹配除去指定路徑的，其它的路徑
　　component: 要跳轉的頁面，如何給一個404提示頁等。
　　name:'404'//這裏的name屬性是打這個路由的名字，能夠給對應的路由起一個名字，方法之後的查找；
　　]
});

路由路徑重定向：
new VueRouter({
　　routes:[
　　　{
　　　　path:'*',
　　　　redirect:'/home'//這裏重定向的路徑
　　　　redirect:{path:'/home'}//也能夠寫成對象的形式
　　　　redirect:{name:'home'}//這裏的name表明的是路由的名字，直接指定這個名字的路由便可

　　　　redirect:(to) =>{//動態設置重定向目標
　　　　//to 目標路由對象，就是訪問的路徑的路由信息
　　　　return '/home' //這裏返回要打開的目標

　　　}
　　}]
});

路由的別名使用方法：
new VueRouter({
routes:[
　　{
　　　　path:'/home',
　　　　component:home,
　　　　alias:'index' //使用這個屬性設置別名

　　}]
})

注：使用別名打開頁面時，不會有選中效果，由於在router-link中匹配的是/home，而不是/index,這個問題在使用中須要注意。

根路徑設置問題：
默認打開http://locallhost:8080 時，打開是空白頁，沒有渲染相關頁面時，這就須要設置一個根路徑；方法以下：
new VueRouter({
　　routes:[
　　{
　　　　path:'/'//直接寫/就表明根路徑
　　　　component:home
　　}]
});
router-link 標籤中的to路徑也要改爲'/'；

按照以上方法寫，頁面打開，切換導航時，激活狀態會出現混亂，home激活狀態和其它按鈕狀態會重疊。
緣由：默認根路徑是一個全包含模式；
處理方法：
<router-link to='/' exact></router-link>
哪裏是根路徑，就加在哪裏

<router-link to="/about/study" tag="li">
<a>study</a>
</router-link>

嵌套路由的使用：

在路由對象中，配置子路由，寫法以下：
new VueRouter({
　　routes:[
　　{
　　　　path:'/about',
　　　　component:about,
　　　　children:[//這個屬性用於配置子路由
　　{
　　　　path:'study',
　　　　component:study
　　}]
　　}
]
});

關注點分離概念：
對應的路徑，渲染對應的組件；

如何設置默認顯示的子路由：
在子路由對應的，路由中，將path:中的值，設置爲空'',便可

注意，若是路由中，有了子路由，就不要把name給父路由設置，直接設置子路由便可，不然瀏覽器會警告提示。

命名視圖：
概念：就是對router-view標籤起一個名字；
使用場景：當遇到同一個單頁面組件裏，須要出現兩個或多個router-view時，就須要對標籤命名了；
命名方法：
1> 經過name屬性起名
<router-view name="slider"></router-view>

new VueRouter({
　　routes:[
　　{
　　　　path:'/document',
　　　　components:{//組件屬性寫成對象形式
　　　　default:document， //default爲默認組件
　　　　slider:slides
　　　　//slider:寫的是標籤中的name值；
　　　　//slides：寫的是slides這個名字的.vue文件，須要引入到頁面中
　　}
　　}]

});
注意：是在對應的路由中添加；

滾動行爲：
瀏覽器滾動默認行爲說明：當頁面滾動到必定位置後，手動刷新瀏覽器，會發現頁面依然在以前滾動位置，這是瀏覽器記錄滾動位置的默認行爲；

需求：點擊瀏覽器的前進和後退的按照時，讓打開的頁面，保持在以前頁面滾動的位置；

作法：

new VueRouter({
　　scrollBehavior(to,from,savedPosition){//滾動行爲，在點擊瀏覽器的前進後退或切換導航時，觸發
　　　　//to:要進入的目標路由對象 (要去哪裏)
　　　　//from:離開的路由對象 (從哪裏來)
　　　　//savadPosition：記錄當前滾動位置滾動條的座標，點擊前進後退時，座標值 {x:0,y:0}
　　}
});

動態路徑
匹配到的全部路由，全都映射到同一個組件
// 動態路徑參數以冒號開頭
{ path: '/user/:id', component: User }
路徑：/user/:userId userId爲動態路徑參數
userId可使用正則符表示
如：
匹配 /user/:userId 有userId和沒有userId的都須要匹配上，能夠寫成：
path:/user/:userId? //這裏的userId？表示有userId和無userId都能匹配

注：在路由path中，添加動態參數方法是 (:參數名)，這裏能夠加多個；
如：user/:userId/:tip

獲取參數：路由信息對象的params

如何拿到動態路由的信息？
created(){
//渲染這個組件會調用一次這個生命週期函數
//複用這個組件，這個函數不會再次被調用了
//地址一但發生變化，$route會從新生成一個路由信息對象
console.lo

g(this.$route)
}
對組件的注入

經過在VUE根實例的router配置傳入router實例
$router router實例對象
$router 當前激活的路由信息對象，每一個組件實例都會有；
beforeRouterEnter() 進入組件前鉤子函數
beforeRouterLeave() 離開組件前鉤子函數

如何監控路由發生的變化？
watch:{//在watch中監控路由
$route(){
//路由有變化，都會在這裏監控到
//路徑發生變化，$route會從新賦值，監控了這個屬性，會執行這個函數
}
}

query查詢字符串說明：
帶查詢參數的連接地址，稱爲：查詢字符串
如：
//下面的結果爲 /user?info=share
<router-link :to="{ path: '', query: { info: 'share' }}">分享</router-link>

連接地址爲：/user?info=share
在切換router-link時，如何獲取查詢字符串中，info=share的share字符串？
經過路由信息對象中的query對象，用於URL查詢參數的對象；

過渡動效：
router 提供了transition的封裝組件，添加過渡動畫
控制方法：會用CSS類名控制
使用方法：
將須要添加過渡效果的router-view包在transition標籤中；以下：
<transition>
<router-view></router-view>
</transition>

過渡模式：
in-out:新進行過渡，完成以後當前元素過渡離開
out-in:當前元素先進行過渡，完成以後新元素過渡進入
使用方法以下：
<transition mode="輸入模式名">
<router-view></router-view>
</transition>

自定義運動效果：
自帶的css類名，是以v-開頭的，後面的不能改變，v-能夠隨意修改；
以下：
v-enter:進入過渡時要作的動畫；
能夠改爲
left-enter:自定義的動畫

自定義的css類名動畫如何使用到transition組件中?
<transition mode="輸入模式名" name="輸入自定義動畫的前綴名(left)">
<router-view></router-view>
</transition>

路由元信息：
在路由配置中meta能夠配置一些數據，用在路由信息對象中，訪問meta中的數據：$route.meta

路由meta的設置方法：(在路由對象中配置)
routes:[
　　{
　　　　path:'/',
　　　　meta:{
　　　　index:0;//路由的下標
　　　　}
　　}
]
若是路由中有子路由，就配置到默認的子路由中，不用配置到父路由中；

頁面中獲取方法：
$route.meta.index

經過監聽$route，獲得目標和離開導航的下標
watch:{
$route(to,from){
to.meta.index //目標導航下標
from.meta.index //離開導航下標
}
}

導航鉤子函數：
beforeEach(to,form,next):導航切換以前執行的函數

全局鉤子函數例子以下：
router.beforeEach((to,from,next)=>{ //只有切換導航就會執行切換導航前執行的函數
console.log('beforeEach')
next();//是否繼續下一個目標路由，flase是不執行，true是執行
next(false);
next('要執行的路徑') //能夠傳一個路由的路徑，要執行到哪一個路徑；
//使用場景，好比當進行指定路由時，須要先登錄才能夠查看；
if(to.meta.login){//在指定路由中，先在meta:{login:true} 在meta中作一個標識。判斷當login爲true的時候，就進入到登錄路由頁面
　　//使用next('/login');
}else{
　　next();//不然直接進入下一個路由
}

})

afterEach:導航切換後執行的函數

router.afterEach((to,from)=>{//切換導航後執行的函數
//經過判斷顯示對應路由的title信息
if(to.meta.title){
　　window.document.title = to.meta.title;
}else{
　　window.document.title ='我要學'
}
})

路由中寫鉤子函數：(routes中配置)
beforeEnter:切換前執行
使用方法與全局同樣

組件中寫鉤子函數：
beforeRouteEnter(to,from,next)：切換前執行
afterRouteLeave：切換後執行
beforeRouteUpdate：當導航中有二級導航時，切換二級導航會觸發這個鉤子
前兩個使用方法與全局同樣
beforeRouteEnter(to,from,next){
//注意這裏面的this問題

}

在beforeRouteEnter中，當訪問data數據中的數據時如何找到及處理辦
法：
export default {
　　data(){
　　　　return {
　　　　　　test:'測試數據'
　　　　}
},
beforeCreat(){//組件建立的鉤子
　　//頁面加載這個鉤子後執行
},
beforeRouteEnter(to,from,next){//組件路由鉤子

console.log(this);//這裏打印的是undefined
//由於，加載頁面時，先執行了beforeEnter的函數，後建立vue實例，因此this獲得的是undefined
//解決辦法
next((vm)=>{//next回調中，會傳vue的實例過來
　　console.log(vm.test);//經過這樣就能夠訪問到vue實例中的數據
});
}
}

beforeRouteUpdate 使用方法
beforeRouteUpdate(to,from,next):使用方法與全局導航同樣

afterRouteLeave 使用方法
afterRouteLeave(to,from,next)：使用方法與全局導航同樣

Vue插件的編寫：
第一個種：
經過在vue的原型鏈上添加自定義屬性($custom)
Vue.prototype.$custom = "這是自定義的屬性"

-----------------------------------------------------------------------------------------
VueX
使用VueX
1.安裝vuex模塊
npm install vuex --save
2.做爲插件使用
Vue.use(Vuex)
3.定義容器
new Vuex.Store({
這裏面放定義狀態代碼
})
4.注入根實例
{store}

vuex代碼，通常放在src/store/index.js文件中

如何在vuex中定義狀態數據？
例：
//建立Vuex實例
let store = new Vuex.Store({
//這裏定義狀態數據
state: {
count: 100
}
});

vuex核心概念
store:相似容器，包含應用的大部分狀態
* 一個頁面只能有一個store
* 狀態存儲是響應式的
* 不能直接改變store中的狀態，惟一途徑顯示地提交mutations

State:包含全部應用級別狀態的對象

Getters:在組件內部獲取store中狀態的函數

Mutations:惟一修改狀態的事件回調函數

Actions:包含異步操做、提交mutation改變狀態

Modules:將store分割成不一樣的模塊

如何獲取定義的狀態數據？
例：
在須要獲取數據的單頁面文件組件中，使用如下方法
html結構：
<template>
<div>
<h2>簡易加法計算器</h2>
<div>
<input type="button" value="-"/>

<span>{{num}}</span>
<input type="button" value="+"/>
</div>
</div>
</template>

如何改變vuex容器中（store）如的值？

一.改變非異步(不經過ajax)的值
使用mutations屬性,處理同步數據修改
例:
vuex對象中寫：
mutations:{//專門用於處理state中狀態數據的回調
//這裏的回調函數本身根修改狀態數據的邏輯，隨意寫
addIncrement(state){//本身寫的函數都會傳一個state，用於找到狀態中對應的數據
state.count +=1;
},
delIncrement(state){
//關於狀態數據修改邏輯類的代碼，都在這裏處理
if(state.count<=0){
state.count = 0;
}else{
state.count -=1;
}
}
}
在單頁面文件組件中調用
methods:{
delHadler(){
//delHadler函數觸發時，調用mutations中的回調函數。
//調用方法，須要使用$store下的commit方法，參數中傳入mutations中的回調函數名
this.$store.commit("delIncrement");
},
addHadler(){
this.$store.commit("addIncrement");
}
}

注意：
mutations不能直接調用；
調用方法：
$store.commit("寫mutations中的回調函數名");

這個方法，一個參數的時候，是直接調用mutations函數。
第二個參數，表明傳入mutations函數的參數。
第二個參數，能夠是1個，多個的時候，傳一個對象；
如:
$store.commit("寫mutations中的回調函數名",{n:2});
這樣在mutations:中就能夠接收了

commit的對象形式寫法
$store.commit({
type:'寫mutations中的回調函數名',
de:10 //這個就是第二個參數，key名隨便起
})

二.改變異步(ajax獲取)的值
使用actions：處理異步數據修改
//要先寫好mutations的方法
mutations:{
　　addIncrement(state){
　　　　state.count +=1;
　　}
},
/*
當遇到數據是經過ajax異步請求過來的，這時數據會有延遲
這種時候，就須要使用actions來提交mutations中的回調函數
*/
actions:{
//函數名隨便寫，參數是一個對象，和store對象的方法屬性都同樣的對象；
addAction(context){
　　　　setTimeout(()=>{
　　　　　　//經過context對象，可使用commit方法，參數輸入mutations中的函數名
　　　　　　context.commit('addIncrement');
　　　　},1000);
　　}
}

調用actions中的函數，方法以下

dispatch傳參的格式方法，與this.$store.commit()如出一轍
this.$store.dispatch('addAction');

actions中的函數能夠相互調用傳值；
例：
actions:{
//函數名隨便寫，參數是一個對象，和store對象的方法屬性都同樣的對象；
addAction(context){
　　　　setTimeout(()=>{
　　　　//經過context對象，可使用commit方法，參數輸入mutations中的函數名
　　　　　　context.commit('addIncrement');

　　　　//這裏調用了下面的函數
　　　　　　context.dispatch('testAction',{test:'測試'});
　　　　},1000);
},
testAction(context,obj){//傳值正常傳
　　//能夠打印出'測試的數據'
　　console.log(obj.test);
　　}
}

actions傳值的另外一種方法

actions:{
//函數名隨便寫，參數是一個對象，和store對象的方法屬性都同樣的對象；
/*
這個context參數，可使用es6的結構賦值方法寫
直接傳一個對象形式{commit,dispatch} 把須要的方法直接寫到裏面，不用傳context去調用對應的方法
這樣寫更方便。
es6的結構賦值：把一個對象裏面的屬性，直接放到對象中；
*/
addAction({commit,dispatch}){
　　　　setTimeout(()=>{
　　　　　　//經過context對象，可使用commit方法，參數輸入mutations中的函數名
　　　　　　commit('addIncrement');
　　　　　　dispatch('testAction',{test:'測試'});
　　　　 },1000);
},
testAction(context,obj){
　　console.log(obj.test);
　　}
}

getter計算狀態
做用：關於狀態數據中，一些對數據的處理(判斷/過濾)等，都在getter屬性中處理。
寫法：在vuex對象中寫

getters:{
　　filterCount(state){//state就是狀態對象
　　　　//在這裏作count的判斷
　　　　return state.count >= 120 ? 120 : state.count;
　　}
}

調用方法：
computed:{//在計算屬性中取vuex定義的狀態數據
　　　　//getter的調用方法，就是在計算屬性中，另定義一個函數，在這個函數中調用getter中判斷過的值
　　num2(){
　　　　//$store中有getters屬性，能夠獲取getter中的filterCount的值
　　　　return this.$store.getters.filterCount;
　　}
}

HTML顯示方法：
<template>
<div>
<h2>簡易加法計算器</h2>
<div>
<input type="button" value="-" @click="delHadler"/>

<span>{{num}}</span>
<input type="button" value="+" @click="addHadler"/>

<p>{{num2}}</p>
</div>
</div>
</template>