Vue | Vuex中五大属性及其辅助函数的使用说明

 

这篇文章主要介绍了vuex中五大属性和使用说明(包括辅助函数)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教。

1.state

vuex的基本数据，用来存储变量

// state存储基本数据
state: {  
   userId: '',  
}

在Vue中使用 this.$store.state.userId

我们可以通过Vue的computed获得Vuex的state

// An highlighted block
const store = new Vuex.Store({
    state: {
        count:0
    }
})

const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        }
    },
    //..
})

mapState辅助函数

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。

为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。

将 Vuex store 中的状态映射为组件的计算属性， mapState有两种常用的写法，分别是对象语法和数组语法：

数组语法

import { mapState } from 'vuex';
 
export default {
 // 映射计算属性
 computed: mapState([
   // 映射 this.count 为 store.state.count
   'count'
 ])
 //...
}

在数组语法中，我们只需列出需要映射的状态属性名称，而不需要指定映射的模块。这种写法会自动将这些属性映射到组件的根状态（即this.$store.state）中。  

对象语法

写法一

import { mapState } from 'vuex';
 
export default {
 // 映射计算属性
 computed: mapState({
   // 映射 this.count 为 store.state.count
   count:state=>state.uploadfile.count
 })
 //...
}

在对象语法中，我们通过一个对象来定义映射关系，在键值对中指定组件中的计算属性名称作为键，然后使用箭头函数返回需要映射的状态值。 

写法二

import { mapState } from 'vuex';
 
export default {
  computed: {
    ...mapState('uploadfile', ['count'])
  },
  // ...
};

推荐使用第二种这种写法。原因如下：

① 语法更加简洁明了，直接指定模块名和需要映射的属性名称，不需要额外的箭头函数或命名空间参数。

② 在组件中使用count时，可以清晰地知道该属性来自于哪个模块，提高了可读性。

③ 当需要映射多个属性时，可以在数组中列出所有需要映射的属性，使代码更加整洁。

总结：

在大型项目中，更推荐使用对象语法 ...mapState('module', ['property']) 来映射状态属性。这是因为大型项目通常具有复杂的模块化结构，并且存在多个模块之间的状态共享和交互。

以下是选择对象语法的原因：

① 模块明确：在大型项目中，往往存在多个模块，每个模块都有自己的状态属性。使用对象语法可以明确指定所需属性属于哪个模块，将状态属性与特定模块关联起来，提高了代码的可读性和可维护性。

② 避免命名冲突：在大型项目中，可能会存在多个模块中同名的状态属性。使用对象语法，可以避免不同模块中的状态属性名称冲突，减少潜在的错误。

③ 模块解耦：使用对象语法可以将组件与特定模块解耦。当模块内部的状态结构发生变化时，只需更新模块内部的代码，而不需要修改组件中的映射代码。这有助于降低代码的耦合性和维护成本。

总之，对于大型项目来说，对象语法更具可扩展性、可读性和维护性，能更好地管理和组织模块化状态属性。使用对象语法能够更清晰地表达状态属性来自于哪个模块，并避免潜在的冲突和错误。

---

state：用来存储公共状态, state中存储的数据都是响应式的。

响应式原因：state里面有get