我同时使用vuex和vuejs 2。

我是vuex的新手,我想看一个商店变量的变化。

我想在我的vue组件中添加手表功能

这是我目前所拥有的:

import Vue from 'vue';
import {
  MY_STATE,
} from './../../mutation-types';

export default {
  [MY_STATE](state, token) {
    state.my_state = token;
  },
};

我想知道my_state是否有任何变化

我怎么看店。My_state在我的vuejs组件?


当前回答

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

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中声明的名称

其他回答

正如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。

我使用的一个非常简单的计算方法是这样的。也许这对你有帮助。

  const variable_name = computed(
        () => store.state.[name_of_state].property_name
      );

你可以这样做的另一个版本是

computed: {
  name () {
    return this.$store.state.[name_of_state].property
  }
}

这是从存储中访问getter的一种格式。 希望你今天过得愉快。

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

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

      },
      {
        deep:true
      }
      );

当你想要在状态级别上观看时,可以这样做:

let App = new Vue({
    //...
    store,
    watch: {
        '$store.state.myState': function (newVal) {
            console.log(newVal);
            store.dispatch('handleMyStateChange');
        }
    },
    //...
});

其实很简单:

watch: {
  '$store.state.drawer': function() {
    console.log(this.$store.state.drawer)
  }
}

如果存储在一个模块中,使用:

'$store.state.myModule.drawer'

对于嵌套文件,使用:

'$store.state.fileOne.fileTwo.myModule.drawer'