4.vuex-part-2

提交数据，获取数据， 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

点击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

输入文本:sa，点击OK按钮：

4.jpg

OK!!!
传送门