Vue-Vuex-共享数据

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

基本使用

<div id="app">
    <father></father>
</div>

• 导入

  <script src="js/vuex.js"></script>
  

• 创建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'
                  }
              }
          },
      },
  });
  

• 使用数据

  <template id="father">
      <div>
          <p>爸爸</p>
          <son></son>
          <!--
        1.通过this.$store拿到Vue对象，就可以使用共享数据了-->
          <p>{{ this.$store.state.msg }}</p>
      </div>
  </template>
  
  <template id="son">
      <div>
          <p>儿子</p>
          <p>{{ this.$store.state.msg }}</p>
      </div>
  </template>
  

共享数据的使用和修改

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

  <template id="son1">
      <div>
          <button @click="add">增加</button>
          <button @click="sub">减少</button>
          <input type="text" v-model:value="this.$store.state.number">
      </div>
  </template>
  <template id="son2">
      <div>
          <button @click="add">增加</button>
          <button @click="sub">减少</button>
          <input type="text" v-model:value="this.$store.state.number">
      </div>
  </template>
  

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

  <div id="app">
      <son1></son1>
      <son2></son2>
  </div>
  

Vuex的mutations属性

• 相当于组件中的methods属性

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

  <template id="son1">
      <div>
          <button @click="add">增加</button>
          <button @click="sub">减少</button>
          <input type="text" v-model:value="this.$store.state.number">
      </div>
  </template>
  <template id="son2">
      <div>
          <button @click="add">增加</button>
          <button @click="sub">减少</button>
          <input type="text" v-model:value="this.$store.state.number">
      </div>
  </template>
  

  <div id="app">
      <son1></son1>
      <son2></son2>
  </div>
  

  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一样，会将数据缓存起来，只有数据发生变化才会重新计算

  <div id="app">
      <son1></son1>
      <son2></son2>
  </div>
  

  <template id="son1">
      <div>
          <p>我是son1</p>
          <!--会将数据缓存起来，只有数据发生变化才会重新计算-->
          <p>{{ this.$store.getters.result }}</p>
          <p>{{ this.$store.getters.result }}</p>
          <p>{{ this.$store.getters.result }}</p>
      </div>
  </template>
  <template id="son2">
      <div>
          <p>我是son2</p>
          <p>{{ this.$store.getters.result }}</p>
      </div>
  </template>
  

  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",
          },
      },
  });