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
})

页面应用：

<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；