码迷,mamicode.com
首页 > 其他好文 > 详细

Vuex使用

时间:2018-03-30 21:37:41      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:bsp   直接   操作   import   ack   vue   java   界面   highlight   

 

目录结构:

技术分享图片

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-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-2、利用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>

  

 

 效果二、带参数的叠加

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>

  

 

 

Vuex使用

标签:bsp   直接   操作   import   ack   vue   java   界面   highlight   

原文地址:https://www.cnblogs.com/yan0802/p/8678268.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!