vuex的几个属性及其使用传参方式

好的！下面是有关Vuex的属性及其使用方法的详细攻略。

Vuex属性

1. State - 状态属性

State是Vuex中存放数据的地方。它的作用是承载用户数据及当前应用的状态信息。在组件中通过$store.state来获取数据。

1. Getter - 获取属性

Getter是vuex中用于从状态层中获取数据的函数。Getter可以对State中的数据进行二次处理后再返回。在组件中通过$store.getters来访问Getter。

1. Mutation - 修改数据

Mutation是vuex中用于变更状态的函数方法。它们必须是同步函数，因为在使用Vue Devtools调试时可以跟踪Mutation的每个状态变化。在组件中通过$store.commit来触发Mutation。

1. Action - 状态操作

Action是vuex中用于提交Mutation的异步函数。Action可以封装复杂的异步操作并提交Mutation来变更store中的状态。在组件中通过$store.dispatch来触发Action。

传参方式

1. Getters传参

可以通过返回一个函数来实现对getter的传参访问。具体示例如下：

// store.js
const store = new Vuex.Store({
  state: {
    productList: [
      { name: 'iPhone X', price: 8099 },
      { name: '华为 Mate30 Pro', price: 5999 },
      { name: '小米 9', price: 2999 },
      { name: 'OPPO Find X2', price: 4999 }
    ]
  },
  getters: {
    getPriceByName: state => name => {
      return state.productList.find(item => item.name === name).price
    }
  }
})
// Price.vue
<script>
  export default {
    computed: {
      iPhoneXPrice () {
        return this.$store.getters.getPriceByName('iPhone X')
      }
    }
  }
</script>

1. Actions传参

Actions 通过 context对象的 commit() 方法与 mutations 进行通信实现对状态的更新。类似于Mutation，Action也支持传递参数，但需要在 store 文件底部，通过[actionName(context, params)]的方式读取。具体示例如下：

// store.js
const store = new Vuex.Store({
  state: {
    productList: [
      { name: 'iPhone X', price: 8099 },
      { name: '华为 Mate30 Pro', price: 5999 },
      { name: '小米 9', price: 2999 },
      { name: 'OPPO Find X2', price: 4999 }
    ]
  },
  actions: {
    updateProductName (context, params) {
      context.commit('updateProductName', params)
    }
  },
  mutations: {
    updateProductName (state, params) {
      state.productList.find(item => item.name === params.oldName).name = params.newName
    }
  }
})
// Product.vue
<script>
  export default {
    methods: {
      updateName () {
        this.$store.dispatch('updateProductName', { oldName: 'iPhone X', newName: '苹果 科技公司 iPhone X' })
      }
    }
  }
</script>

以上就是有关Vuex属性的详细说明以及两条传参示例。希望对您有所帮助！