Vue-Vuex-共享数据

• 将组件之间需要操作的共享数据保存到Vuex中，实现简单全局共享和更新，不需要再组件之间层层传递

---

基本使用

• 导入

• 创建Vuex对象

  const store = new Vuex.Store({
      /* 
      1.state就相当于组件中的data */
      state: {
          msg: "lnj"
      }
  })
  

• 在Vue实例中在绑定Vuex对象

  new Vue({
      el: '#app',
      /* 
      1.在顶级组件中通过store属性绑定Vuex对象
      2.绑定了Vuex的组件那么除了它自己，它子组件都可以使用共享数据*/
      store: store,
      components:{
          "father": {
              template:"#father",
              components: {
                  'son': {
                      template: '#son'
                  }
              }
          },
      },
  });
  

• 使用数据

---

共享数据的使用和修改

• 定义两个同等级子组件，再子组件内修改数据

  const store = new Vuex.Store({
      state: {
          number: 0
      }
  })
  

  new Vue({
      el: '#app',
      // 再顶级父组件中通过store属性保存Vuex对象
      store: store,
      components:{
          "son1": {
              template:"#son1",
              methods: {
                  add () {
                      this.$store.state.number++
                  },
                  sub () {
                      this.$store.state.number--
                  },
              }
          },
          "son2": {
              template:"#son2",
              methods: {
                  add () {
                      this.$store.state.number++;
                  },
                  sub () {
                      this.$store.state.number--;
                  },
              }
          },
      },
  });
  

---

Vuex的mutations属性

• 相当于组件中的methods属性

• 虽然可以在组件内部可以通过methods属性新建方法操作共享的数据，但不推荐，因为这种直接操作共享数据的方式，当问题出现的时候很难排错不专业，推荐通过在Vuex的实例中的mutations属性建立修改共享数据的方法，然后再组件的methods属性，建立方法，再该内部方法上调用Vuex实例对象的方法

  const store = new Vuex.Store({
      state: {
          number: 0
      },
      // mutations就相当于组件中的methods
      mutations: {
          // 通过方法的形参可拿到state属性上的数据
          _add (state) {
              state.number++
          },
          _sub (state) {
              state.number--
          },
      }
  })
  

  new Vue({
      el: '#app',
      store: store,
      components:{
          "son1": {
              template:"#son1",
              /*
              1.在各自的组件上methods新建方法，在该方法上调用Vuex实例对象的方法*/
              methods: {
                  add () {
                      /*
                      1.调用Vuex的方法需要通过commit方法
                      格式：
                      Vuex实例对象.commit("需要调用的方法名称")*/
                      this.$store.commit("_add")
                  },
                  sub () {
                      this.$store.commit("_sub")
                  }
              }
          },
          "son2": {
              template:"#son2",
              methods: {
                  add () {
                      this.$store.commit("_add")
                  },
                  sub () {
                      this.$store.commit("_sub")
                  }
              }
          },
      },
  });
  

---

Vuex的getters属性

• Vuex的getters属性就和组件的computed一样，会将数据缓存起来，只有数据发生变化才会重新计算

  const store = new Vuex.Store({
      state: {
          str1: "www.baidu.com",
          str2: "百度"
      },
      // getters与组件中的computed属性基本用法基本一致
      getters: {
          result: function (state) {
              console.log("函数被执行了")
              return state.str1 + state.str2
          }
      }
  })
  
  new Vue({
      el: '#app',
      store: store,
      components:{
          "son1": {
              template:"#son1",
          },
          "son2": {
              template:"#son2",
          },
      },
  });