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使用的主要内容,如果未能解决你的问题,请参考以下文章