如果您只是想监视一个状态属性，然后根据该属性的变化在组件中进行相应的操作，请参阅下面的示例。

在store.js:

export const state = () => ({
 isClosed: false
})
export const mutations = {
 closeWindow(state, payload) {
  state.isClosed = payload
 }
}

在这个场景中，我创建了一个布尔状态属性，我将在应用程序的不同地方更改，如下所示:

this.$store.commit('closeWindow', true)

现在，如果我需要在其他组件中监视状态属性，然后更改本地属性，我会在挂载的钩子中写入以下内容:

mounted() {
 this.$store.watch(
  state => state.isClosed,
  (value) => {
   if (value) { this.localProperty = 'edit' }
  }
 )
}

首先，我在状态属性上设置了一个监视器，然后在回调函数中，我使用该属性的值来更改localProperty。

我希望这能有所帮助!

正如Gabriel所说，观察商店变化的最佳方法是使用mapGetters。 但在某些情况下，你不能通过mapGetters来实现，例如，你想从store中获取一些东西，使用parameter:

getters: {
  getTodoById: (state, getters) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

在这种情况下，你不能使用mapGetters。你可以试着这样做:

computed: {
    todoById() {
        return this.$store.getters.getTodoById(this.id)
    }
}

但不幸的是，todoById仅在以下情况下才会更新。Id改变了

如果你想更新你的组件在这种情况下使用。$store。腕表解决方案由龚提供。或者有意识地处理组件并更新它。当需要更新todoById时，使用todoById。

我想提问者想用带有Vuex的手表。

this.$store.watch(
      (state)=>{
        return this.$store.getters.your_getter
      },
      (val)=>{
       //something changed do something

      },
      {
        deep:true
      }
      );

我用了这种方法，它很有效:

store.js:

const state = {
  createSuccess: false
};

mutations.js

[mutations.CREATE_SUCCESS](state, payload) {
    state.createSuccess = payload;
}

actions.js

async [mutations.STORE]({ commit }, payload) {
  try {
    let result = await axios.post('/api/admin/users', payload);
    commit(mutations.CREATE_SUCCESS, user);
  } catch (err) {
    console.log(err);
  }
}

getters.js

isSuccess: state => {
    return state.createSuccess
}

在你使用state from store的组件中:

watch: {
    isSuccess(value) {
      if (value) {
        this.$notify({
          title: "Success",
          message: "Create user success",
          type: "success"
        });
      }
    }
  }

当用户提交表单时，action STORE将被调用，创建成功后，CREATE_SUCCESS突变将被提交。Turn createsuccsuccess为true，在组件中，监控器将看到值已更改并触发通知。

isSuccess应该匹配你在geters .js中声明的名称

您可以使用Vuex操作、getter、计算属性和监视器的组合来侦听Vuex状态值的变化。

HTML代码:

<div id="app" :style='style'>
  <input v-model='computedColor' type="text" placeholder='Background Color'>
</div>

JavaScript代码:

'use strict'

Vue.use(Vuex)

const { mapGetters, mapActions, Store } = Vuex

new Vue({
    el: '#app',
  store: new Store({
    state: {
      color: 'red'
    },
    getters: {
      color({color}) {
        return color
      }
    },
    mutations: {
      setColor(state, payload) {
        state.color = payload
      }
    },
    actions: {
      setColor({commit}, payload) {
        commit('setColor', payload)
      }
    }
  }),
  methods: {
    ...mapGetters([
        'color'
    ]),
    ...mapActions([
        'setColor'
    ])
  },
  computed: {
    computedColor: {
        set(value) {
        this.setColor(value)
      },
      get() {
        return this.color()
      }
    },
    style() {
        return `background-color: ${this.computedColor};`
    }
  },
  watch: {
    computedColor() {
        console.log(`Watcher in use @${new Date().getTime()}`)
    }
  }
})

参见JSFiddle演示。

Vue手表处于字符串状态

状态:

$store.state.local_store.list_of_data

内部组件

  watch: {
       
       '$store.state.local_store.list_of_data':{//<----------your state call in string
        handler(){
            console.log("value changeing in party sales entry"); //<---do your stuff here
        },
        deep:true
       }

    },