如何查看来自 vuex 的存储值？

如果您只是想观察一个状态属性，然后在组件内根据该属性的变化采取行动，请参见下面的示例。

在 store.js 中：

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

在这种情况下，我将创建一个 boolean 状态属性，我将在应用程序的不同位置更改它，如下所示：

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

现在，如果我需要在其他组件中查看该状态属性，然后更改本地属性，我将在 mounted 挂钩中编写以下内容：

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

首先，我在 state 属性上设置了一个观察者，然后在回调函数中我使用该属性的 value 来更改 localProperty。

我希望它有帮助！

如果您使用打字稿，那么您可以：

从“vue-property-decorator”导入{ Watch }； .. @Watch("$store.state.something") private watchSomething() { // 使用 this.$store.state.something 进行访问 ... }

通过观察和设置值变化来创建存储变量的本地状态。这样表单输入 v-model 的局部变量更改不会直接改变存储变量。

data() {
  return {
    localState: null
  };
 },
 computed: {
  ...mapGetters({
    computedGlobalStateVariable: 'state/globalStateVariable'
  })
 },
 watch: {
  computedGlobalStateVariable: 'setLocalState'
 },
 methods: {
  setLocalState(value) {
   this.localState = Object.assign({}, value);
  }
 }

在计算中使用你的getter然后观察它并做你需要的

    computed:{
    ...mapGetters(["yourGetterName"])
 },
 watch: {
    yourGetterName(value) {
       // Do something you need
    },

  }

在组件内部，创建一个计算函数

computed:{
  myState:function(){
    return this.$store.state.my_state; // return the state value in `my_state`
  }
}

现在可以查看计算出的函数名称，例如

watch:{
  myState:function(newVal,oldVal){
    // this function will trigger when ever the value of `my_state` changes
  }
}

在 vuex 状态 my_state 中所做的更改将反映在计算函数 myState 中并触发监视函数。

如果状态 my_state 包含嵌套数据，则 handler 选项将帮助更多

watch:{
  myState:{
    handler:function(newVal,oldVal){
      // this function will trigger when ever the value of `my_state` changes
    },
    deep:true
  }
}

这将监视存储区 my_state 中的所有嵌套值。

观察商店变化的最佳方式是使用 Gabriel 所说的 mapGetters。但在某些情况下，您无法通过 mapGetters 进行操作，例如您想使用参数从商店获取某些东西：

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

在这种情况下，您不能使用 mapGetters。您可以尝试执行以下操作：

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

但不幸的是todoById will be updated only if this.id is changed

如果您希望在这种情况下更新组件，请使用 this.$store.watch solution provided by Gong。或者有意识地处理您的组件并在需要更新 todoById 时更新 this.id。

您还可以订阅存储突变：

store.subscribe((mutation, state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})

https://vuex.vuejs.org/api/#subscribe

当您想在状态级别观看时，可以通过以下方式完成：

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

您可以使用 Vuex actions、getters、computed properties 和 watchers 的组合来监听 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()}`)
    }
  }
})

See JSFiddle demo。

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
       }

    },

你也可以在你的 vue 组件中使用 mapState 来直接从 store 中获取状态。

在您的组件中：

computed: mapState([
  'my_state'
])

其中 my_state 是来自商店的变量。

====== store ===== import Vue from 'vue' import Vuex from 'vuex' import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ state: { showRegisterLoginPage: true , 用户: null, allitem: null, productShow: null, userCart: null }, 突变: { SET_USERS(state, payload) { state.user = payload }, HIDE_LOGIN(state) { state.showRegisterLoginPage = false }, SHOW_LOGIN(state ) { state.showRegisterLoginPage = true }, SET_ALLITEM(state, payload) { state.allitem = payload }, SET_PRODUCTSHOW(state, payload) { state.productShow = payload }, SET_USERCART(state, payload) { state.userCart = payload } }，操作：{ getUserLogin({ commit }) { axios({ method: 'get', url: 'http://localhost:3000/users', headers: { token: localStorage.getItem('token') } } ) .then(({ data }) => { // console.log(data) commit('SET_USERS', data) }) .catch(err => { console.log(err) }) }, addItem({ dispatch }, payload) { let formData = new FormData() formData.append('name', payload.name) formData.append('file', payload.fi le) formData.append('category', payload.category) formData.append('price', payload.price) formData.append('stock', payload.stock) formData.append('description', payload.description) axios({ method: 'post', url: 'http://localhost:3000/products', data: formData, headers: { token: localStorage.getItem('token') } }) .then(({ data } ) => { // console.log('data has been created ', data) dispatch('getAllItem') }) .catch(err => { console.log(err) }) }, getAllItem({ commit }) { axios({ method: 'get', url: 'http://localhost:3000/products' }) .then(({ data }) => { // console.log(data) commit('SET_ALLITEM', data ) }) .catch(err => { console.log(err) }) }, addUserCart({ dispatch }, { payload, productId }) { let newCart = { count: payload } // console.log('ini dari store nya', productId) axios({ method: 'post', url: `http://localhost:3000/transactions/${productId}`, data: newCart, headers: { token: localStorage.getItem('token' ) } }) .then(({ data }) => { dispatch('getUserCart') // console.log('cart has已添加 ', data) }) .catch(err => { console.log(err) }) }, getUserCart({ commit }) { axios({ method: 'get', url: 'http://localhost: 3000/transactions/user', headers: { token: localStorage.getItem('token') } }) .then(({ data }) => { // console.log(data) commit('SET_USERCART', data) }) .catch(err => { console.log(err) }) }, cartCheckout({ commit, dispatch }, transactionId) { let count = null axios({ method: 'post', url: `http:// localhost:3000/transactions/checkout/${transactionId}`，标题：{ token: localStorage.getItem('token') }，数据：{ sesuatu: 'sesuatu' } }) .then(({ data }) => { count = data.count console.log(count, data) dispatch('getUserCart') }) .catch(err => { console.log(err) }) }, deleteTransactions({ dispatch }, transactionId) { axios( { 方法：'delete'，url：`http://localhost:3000/transactions/${transactionId}`，标题：{ token: localStorage.getItem('token') } }) .then(({ data }) => { console.log('成功删除') dispatch('getUserCart') }) .catch(err => { console.log(e rr) }) } }，模块：{} })

我用这种方式，它的工作原理：

商店.js：

const state = {
  createSuccess: false
};

突变.js

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

动作.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
}

在您使用商店状态的组件中：

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

当用户提交表单时，将调用操作 STORE，创建成功后，将提交 CREATE_SUCCESS 突变。将 createSuccess 设为 true，并且在组件中，watcher 将看到 value 已更改并触发通知。

isSuccess 应该与您在 getters.js 中声明的名称匹配

也可以用 debouncedWatch 安全观看（vue使用功能）

  debouncedWatch(
    lines,
    () => {
      console.log('changed');
    },
    500,
  );

我使用计算的一个非常简单的方法是这样的。可能对你有任何帮助。

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

您可以执行此操作的另一个版本是

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

这是一种从商店访问 getter 的格式。希望你有一个美好的一天。