抽取方法为常量形式
import Vue from 'vue' // 导入vuex import Vuex from 'vuex' import {INCR} from "./type"; // 通过vue安装vuex Vue.use(Vuex) /** * 创建store * @type {Store<{counter: number}>} */ const store = new Vuex.Store({ // 用于定义属性 state:{ counter:1000 }, // 定义用于修改属性的函数 mutations:{ [INCR](state){ state.counter+=100; }, // 第一个参数是 state modifyCounter(state){ state.counter--; }, // 传递参数 modifyCounterVal(state,val){ state.counter += val; } }, // 计算属性也就是getters 用于获取 getters:{ // 获取平方 getCountPF(state) { return state.counter * state.counter; }, // 获取 平方的2分之一 getCountTwoOne(state, getters) { return getters.getCountPF / 2; }, // 获取 平方的n分之一 参数传递 getCountN(state,getters){ return function (n){ return getters.getCountPF / n; } } } }) export default store
type.js
export const INCR = 'incr'
app.vue
<template> <div id="app"> <h2>访问store</h2> <h3>{{$store.state.counter}}</h3> <!-- 通过commit传入方法调用--> <button @click="$store.commit('modifyCounter')">-</button> <!-- 传递参数--> <button @click="$store.commit('modifyCounterVal',5)">+5</button> <!-- 常量方法--> <button @click="incr">+100</button> <h2>获取Counter的平方</h2> <h2>{{$store.getters.getCountPF}}</h2> <h2>获取Counter的平方 2/1</h2> <h2>{{$store.getters.getCountTwoOne}}</h2> <h2>获取Counter的平方 n/1</h2> <h2>{{$store.getters.getCountN(5)}}</h2> </div> </template> <script> import TabBar from "./components/tabbar/TabBar"; import {INCR} from "./sotre/type"; export default { name: 'App', components:{ TabBar }, methods:{ incr(){ this.$store.commit(INCR); } } } </script> <style> @import "./assets/css/base.css"; </style>
作者:彼岸舞
时间:2021\06\28
内容关于:VUE
本文属于作者原创,未经允许,禁止转发