Vuex使用

Posted Yan82

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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-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>

  

 

 效果二、带参数的叠加

1-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-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\'

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>

  











以上是关于Vuex使用的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段13——Vue的状态大管家

项目集成 vue-router 和 vuex

Vue 教程(四十九)Vuex 核心概念和项目结构

Vue 教程(四十九)Vuex 核心概念和项目结构

Vue 教程(四十九)Vuex 核心概念和项目结构

Vue 教程(四十九)Vuex 核心概念和项目结构