欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vuex的使用

程序员文章站 2024-02-28 12:19:16
...

vuex的使用

npm install vuex --save

vuex下面store.js里面的内容:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

// 声明一个常量
const state={
  count:1
}

//操作变量的方法
const mutations={
  add(state){
    state.count += state.count;
  },
  reduce(state){
    state.count--;
  },
  fn(state){
    console.log(state)
    debugger
  }
}
const actions = {
  add(context) {
    context.commit("add");
  },
  reduce(context) {
    context.commit("reduce");
  },
  fn(context){
    context.commit("fn");
    debugger
  }
}

// 外面使用需要进行暴露
export default new  Vuex.Store({
  state,
  mutations,
  actions

  // state,
  // actions,
  // getters,
  // mutations
})

页面应用:

vuex的使用

<template>
  <div>列表 {{count}}
    <button @click="$store.commit('add')">点击</button>
    <button @click="add()">页面点击</button>
  </div>
</template>

<script>
    export default {
        name: "list",
      data(){
          return{
          }
      },
      computed:{
        count:function(){
          return this.$store.state.count // 读取vuex的值
        }
      },
      methods: {
        add(){
          this.$store.dispatch("add")
        }
      }
    }
</script>

 

vuex 使用的场景:

  1. 涉及到非父子关系的组件,例如兄弟关系、祖孙关系,甚至更远的关系;
  2. 他们之间如果有数据交互,那么应该使用Vuex来实现;
  3. 如果页面复杂度比较低的话,也可以考虑使用 global-event-bus 来实现;
  4. 如果只是父子关系的组件数据交互,那么应该考虑使用props进行单向传递;
  5. 如果涉及到子组件向父组件的数据传递,那么应该考虑使用 $emit 和 $on

上一篇: 个人理解线程池

下一篇: js中的json