vuex- 基礎操做流程（數據不分塊）

1.安裝vuex

$ yarn add vuex 或者$npm i vuex -S

2.在src目錄下建立store目錄：

import Vuex from 'vuex'

import Vue from 'vue'

Vue.use( Vuex )

// 1. 定義store 模塊

// const store = new Vuex.Store( options )

const store = new Vuex.Store({

state：{

count: 0

},

actions：

/*

1. actions是一個對象

2. acitons裏面放的都是方法

3. 方法的做用是建立動做，發送動做

increment ( store對象,組件發來的實際參數1，參數2 ) {}

*/

increment ( { commit }, val ) {

console.log('increment執行了')

console.log('val', val )

// 動做建立

const action = {

type: INCREMENT,

val

}

// 發送動做

commit( action )

}

},

mutations：{

/*

* 也是一個對象

* 裏面存放的也是方法

* 方法名稱是actions發送來的動做的類型

* 接收兩個參數

* state就是數據 ， action就是actions發來的動做

* mutations做用是用來修改數據的

* payload表示從組件傳遞過來的參數 負載

*/

[ INCREMENT ] ( state,action ) {

console.log('mutations執行了')

console.log( 'state',state)

console.log( 'action',action )

//修改數據

state.count ++

}

},

getters: {}, //getters表示幫助 視圖【 組件 】 得到store中的 state

modules // 用來實現數據分塊的

/*

數據分塊：

一個項目中是有多個功能或是頁面的，好比有

home

分類

列表

詳情

用戶

普通用戶

會員

超級會員

底部欄

頭部欄

圖表數據

一個state管理全部的這些數據，就會變的雜亂，和很差維護，因此咱們但願將數據分塊，單一管理，一個數據一個模塊

*/

})

// 2. 導出store模塊

export default store

3.在main.js中注入store：

import store from './store'

new Vue({

router, // 在項目中注入路由，讓全部的子組件都用於路由屬性 $route $router

store, // 在項目中注入store,讓全部的子組件擁有一個屬性 $store ， 用於和vuex進行通訊

render: h => h(App),

}).$mount('#app')

4.在組件內使用：

<template>

<div> vuex - 基礎 <hr/> <button @click = "add"> + </button>

<p> {{ $store.state.count }} </p>

</div>

</template>

<script>

export default {

methods: {

add () {

// 執行actions中的increment方法

// this.$store.dispatch( actions中方法的名稱 )

this.$store.dispatch('increment',100)

}

},

created () {

console.log( this.$store )

}

}

</script>