Vuex使用

 

目錄結構：

index.js // 在不少處被命名爲store.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters' // 就是獲取state中狀態，僅單向的獲取數據，不作任何修改
import state from './state'  // 至關於數據庫,定義了應用數據的數據結構及初始狀態
import mutations from './mutations' // 定義state數據的修改操做
import createLogger from 'vuex/dist/logger' // 修改記錄日誌

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production' // 在開發環境下使用debug

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

　　

效果一：疊加

1-一、普通方法實現

State.js // 定義常量

const state = {
  starNum: 1 // 初識值
}

export default state

Mutations.js // 定義方法

const mutations = {
  // 方法1：
   add: state => state.starNum++

  // 方法二：
   add (state) {
     state.starNum++
   }
}
export default mutations

界面

方法一：在html中直接使用vuex中的方法
<template>
  <div>
　　{{$store.state.starNum}} // 顯示當前starNum
　　<button @click="$store.commit('add')">+</button> //　運用add方法
  </div>
</template>

<script type="text/ecmascript-6">
　import store from 'store/index'
　export default {
　  store
　}
</script>

方法二：利用方法
<template>
  <div>
   {{$store.state.starNum}} // 顯示當前starNum
   <button @click="add()">+</button> // 運用add方法
  </div>
</template>

<script>
  import store from 'store/index'
  
  export default {
   methods: {
     add () {
// 寫法一： store.commit('add')
// 寫法二： return this.$store.commit('add')     
     }
   },
   store
 }
</script>

　　

 

1-二、利用mutations-types實現

State.js // 定義常量

const state = {
  starNum: 1 // 初識值
}

export default state

mutations-types.js //　定義方法名

export const ADD = 'ADD' // 疊加方法

Mutations.js // 定義方法

import * as types from './mutation-types'// 獲取mutation-types內定義的常量

const mutations = {
  [types.ADD]: state => state.starNum++
 
}
export default mutations

頁面

<template>
  <div>
      {{$store.state.starNum}}
      <button @click="addNum()">+</button>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapMutations} from 'vuex'

  export default {
    methods: {
      ...mapMutations({
        addNum: 'ADD'
      })
    }
  }
</script>

　　

 

 效果2、帶參數的疊加

1-一、普通方法實現

State.js // 定義常量

const state = {
  starNum: 1 // 初識值
}

export default state

mutations.js //　定義方法名

const mutations = {
  add (state, n) {
    state.starNum += n
  }
｝

界面

 

方法一：$store.commit
<template>
  <div>
   {{$store.state.starNum}} // 顯示當前starNum
   <button @click="add()">+</button> // 運用add方法
  </div>
</template>

<script>
  import store from 'store/index'
  
  export default {
   methods: {
     add () {
// 寫法一： store.commit('add', 4)
// 寫法二： return this.$store.commit('add', 10)     
     }
   },
   store
 }
</script>

方法二：mapMutations
<template>
  <div>
    {{$store.state.starNum}}
    <button @click="addNum()">+</button>
  </div>
</template>

<script>
  import {mapMutations} from 'vuex'

  export default {
    methods: {
      ...mapMutations({
       addNum: 'add'
      })
    }
  }
</script>

 

　　

 

 

1-二、利用mutations-types實現

State.js // 定義常量

const state = {
  starNum: 1 // 初識值
}

export default state

mutations-types.js //　定義方法名

export const ADD = 'ADD' // 疊加方法

mutations.js //　定義方法名　　

import * as types from './mutation-types'

const mutations = {
 [types.ADD] (state, n) {
    state.starNum += n
  }
｝

export default mutations　　

界面

<template>
  <div>
   {{$store.state.starNum}} // 顯示當前starNum
   <button @click="addNum(4)">+</button>
  </div>
</template>

<script>
  import store from 'store/index'
  import {mapMutations} from 'vuex'
  
  export default {
   methods: {
     addNum() {
        this.$store.commit('add', n)
     },
     ...mapMutations({
         addNum: 'ADD'
      })
   },
   store
 }
</script>