vuex state中的数组变化监听实例

关于Vuex state中的数组变化监听，可以使用Vue提供的watch方法监听数组变化。

先来简单介绍一下实现的方法：

1. 在state定义的数组数据前加上$符号，例如：$list

2. 监听数据的方式：

    // 监听数据变化
    watch: {
        '$store.state.list': {
            handler: function (newValue, oldValue) {
                console.log('watch state changed:', newValue, oldValue);
            },
            deep: true
        }
    }

这里需要注意几点：

1. 监听数组数据时需要使用deep:true，因为Vue默认只是浅层监测，只有在值为基本数据类型时才能被监测到，而不是对象或者数组；

2. 这里使用的是Vue中的$watch方法，而不是Vuex中的watch方法，因为Vuex中的watch方法只能处理同步操作。

下面提供两个示例：

一. 会计记录表

// state
const state = {
  $records: [
    {id: 1, name: '张三', amount: 100},
    {id: 2, name: '李四', amount: 200},
    {id: 3, name: '王五', amount: 50},
  ]
}

// getters
const getters = {}

// mutations
const mutations = {
  addRecord(state, record) {
    // 新增记录
    state.$records.push(record)
  },
  deleteRecord(state, id) {
    // 删除记录
    const index = state.$records.findIndex(record => record.id === id)
    state.$records.splice(index, 1)
  },
  updateRecord(state, record) {
    // 更新记录
    const index = state.$records.findIndex(r => r.id === record.id)
    state.$records.splice(index, 1, record)
  },
}

// 记录列表
Vue.component('record-list', {
  template: `
    <div>
      <table>
        <thead>
          <tr>
            <th>ID</th><th>姓名</th><th>金额</th><th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="record in $records" :key="record.id">
            <td>{{ record.id }}</td>
            <td>{{ record.name }}</td>
            <td>{{ record.amount }}</td>
            <td>
              <button @click="edit(record)">编辑</button>
              <button @click="deleteRecord(record.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <button @click="add">新增</button>
    </div>
  `,
  data() {
    return {
      record: {}
    }
  },
  computed: {
    $records() {
      return this.$store.state.$records
    }
  },
  methods: {
    add() {
      this.record = {}
      this.$store.commit('addRecord', this.record)
    },
    edit(record) {
      this.record = Object.assign({}, record)
    },
    deleteRecord(id) {
      this.$store.commit('deleteRecord', id)
    }
  },
  // 监听数据
  watch: {
    '$store.state.$records': {
      handler: function (newValue, oldValue) {
        console.log('watch state changed:', newValue, oldValue);
      },
      deep: true,
    }
  }
})

这是一个会计记录表的示例，其中state中包含一个$records数组，该数组包含所有的会计记录。组件中定义了记录列表，并提供了和该表格相关的操作，包括新增、编辑和删除记录。同时使用watch方法来监测到该列表的变化。

二. 订单列表

// state
const state = {
  $orders: [
    {id: 1, name: '订单1', products: ['产品1', '产品2']},
    {id: 2, name: '订单2', products: ['产品3', '产品4']},
    {id: 3, name: '订单3', products: ['产品5', '产品6']},
  ]
}

// getters
const getters = {}

// mutations
const mutations = {
  addOrder(state, order) {
    // 新增订单
    state.$orders.push(order)
  },
  deleteOrder(state, id) {
    // 删除订单
    const index = state.$orders.findIndex(order => order.id === id)
    state.$orders.splice(index, 1)
  },
  updateOrder(state, order) {
    // 更新订单
    const index = state.$orders.findIndex(o => o.id === order.id)
    state.$orders.splice(index, 1, order)
  },
}

// 订单列表
Vue.component('order-list', {
  template: `
    <div>
      <table>
        <thead>
          <tr>
            <th>ID</th><th>名称</th><th>产品列表</th><th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="order in $orders" :key="order.id">
            <td>{{ order.id }}</td>
            <td>{{ order.name }}</td>
            <td>{{ order.products.join(', ') }}</td>
            <td>
              <button @click="edit(order)">编辑</button>
              <button @click="deleteOrder(order.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <button @click="add">新增</button>
    </div>
  `,
  data() {
    return {
      order: {}
    }
  },
  computed: {
    $orders() {
      return this.$store.state.$orders
    }
  },
  methods: {
    add() {
      this.order = {}
      this.$store.commit('addOrder', this.order)
    },
    edit(order) {
      this.order = Object.assign({}, order)
    },
    deleteOrder(id) {
      this.$store.commit('deleteOrder', id)
    }
  },
  // 监听数据
  watch: {
    '$store.state.$orders': {
      handler: function (newValue, oldValue) {
        console.log('watch state changed:', newValue, oldValue);
      },
      deep: true,
    }
  }
})

这是一个订单列表的示例，其中state中包含一个$orders数组，该数组包含所有的订单信息，包括名称和产品列表。组件中定义了订单列表，并提供了常见的订单操作，包括新增、编辑和删除订单信息，同时也使用watch方法来监测到该列表的变化。

以上就是Vuex state中的数组变化监听实例的详细攻略，希望能够对您有所帮助。