提交数据，获取数据， vue界面监控store属性的变化

1.VUEX的一些注意点（提交数据，获取数据）

store:存储状态，也就是变量。
mutations: 提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。
getters: 相当于vue中的computed计算属性

如下例子：
store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  /**
   * state: 定义状态--- vuex中的数据源。
   * 我们保存的数据就保存在这里，可以在页面通过 this.$store.state.?来获取我们定义的数据
    */
  state: {
    author: 'Wise Ray',
    ylist: [{a: '1xsa', b: 'ass'}, {a: 'qwx2', b: 'mouth'}],
    current_a: 'qwx2'
  },
  /**
   * mutations
   * 提交状态修改。
   * 也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。
   * 第一个参数默认是state。外部调用方式：store.commit('setAuthor', 'ray')。和vue中的methods类似。
   */
  mutations: {
    setAuthor (state, msg) {
      state.author = msg
    },
    pushYlist (state, item) {
      state.ylist.push({id: item.a, keyname: item.b})
    }
  },
  /**
   * getters
   * 相当于vue中的computed计算属性
   */
  getters: {
    // 写法1
    getAuthor: (state) => () => {
      return state.author
    },
    getYlist: state => () => {
      return state.ylist
    },
    // 写法2
    getcurrent_a: state => () => state.current_a,
    // 调用其他getter--->可以接受其他的getters作为参数
    getb_by_current_a: (state, getters) => () => {
      for (let k in state.ylist) {
        if (state.ylist[k].a === getters.getcurrent_a()) {
          return state.ylist[k].b
        }
      }
    },
    getb_by_a: (state) => (a) => {
      for (let k in state.ylist) {
        if (state.ylist[k].a === a) {
          return state.ylist[k].b
        }
      }
    }
  }
})

export default store

test.vue

<template>
  <div style="text-align: left;">
    This is a Test
    <p>
      I am {{author}}
    </p>
    <el-input v-model="authorIn" placeholder="sdsdds"/>
    <el-button slot="append" @click="setAuthorBtn">Ok</el-button>
    <div style="margin-top: 20px;">
      <el-button @click="print_store">print_store</el-button>
    </div>
    <div style="margin-top: 20px;">
      <el-button @click="goTest1">goTest1</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      authorIn: ''
    }
  },
  methods: {
    setAuthorBtn () {
      this.$store.commit('setAuthor', this.authorIn)
    },
    print_store () {
      // 获取store里面的数据
      console.log('this.$store.getters.getAuthor----->', this.$store.getters.getAuthor())
      console.log('this.$store.getters.getcurrent_a--->', this.$store.getters.getcurrent_a())
      console.log('this.$store.getters.getb_by_current_a--->', this.$store.getters.getb_by_current_a())
      console.log('this.$store.getters.getb_by_a--->', this.$store.getters.getb_by_a('1xsa'))

      // 提交数据到store
      this.$store.commit('pushYlist', {a: 'xxx', b: 'yyy'})
      // 获取store里面的ylist数据
      console.log('ylist', this.$store.getters.getYlist())
    },
    goTest1 () {
      this.$router.push('/test1')
    }
  },
  /**
   * 如下两个实现监听store里面的author属性的变化.
   */
  computed: {
    author () {
      return this.$store.state.author
    }
  },
  watch: {
    // 第一个参数：修改之前的值，第二个参数：修改之后的值
    author (newv, oldv) {
      console.log('watch--author-->', oldv, '--->', newv)
    }
  }
}
</script>

点击print_store按钮执行结果：

0.jpg

2.vue界面监控store属性的变化从而做出相应的动作

vue文件中，computed计算属性，如果store里面的author属性变化，那么该computed里面的author()方法会返回新的值，那么这时候watch里面的author方法会监控computed里面的author()方法发生变化，那么就会执行watch里面的author()方法，这时候就实现了vue页面监控store里面author属性值的变化，这时候vue页面可以在watch里面的author()方法里面做出相应的操作，比如加载新数据等等。。。

2019-05-05_152342.jpg

4.jpg