标签：INCR VUE getters state 从零开始 import VueX store counter

抽取方法为常量形式

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

本文属于作者原创,未经允许,禁止转发

标签：INCR,VUE,getters,state,从零开始,import,VueX,store,counter
来源： https://www.cnblogs.com/flower-dance/p/14944657.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。