vuex状态管理模式之state属性

一、Vuex是什么？

vuex是用来专门管理vue组件中的共享数据的状态管理模式。那vuex中状态又是什么东东呢？
我们在学习vuex时，我们先来回顾一下vuejs组件之间的数据通信有哪几种：

1、父组件向子组件发出通信

• 通过props关键字，也就是父组件绑定一个属性，并且把 这个属性通过关 props[‘attr’]传递给子组件。

2、子组件向父组件发出通信

• 子组件通过关键字emit(‘eventType’)向父组件发出通信，父组件通过绑定该属性来触发dom的更新。

3、非父子组件的通信

• 非父子组件的通信通常通过实例化一个空的vue构造器来管理状态。
• const bus = new Vue()
• 然后在组件A内容通过bus.$emit(‘event’,params)发出一个事件。
• 组件B内通过bus.$on(‘event’,params => console.log(params))来监听组件A发来的请求。

*但是，随着我们项目数据越来越庞大，上面几种方式数据通信有一些不好的地方。

• 多个组件共享一个数据时，每个组件都需要props或者$emit会显得特别的麻烦。
• 数据管理不太明显，单向数据的简洁性遭到破坏，后期维护乏力。

vuex中的state属性，学习该属性时我们先来认识下什么是vuex状态?

• 状态也称为数据源，是vuex把组件中共享的data把它抽离出来放在单独的state属性下面，state它是一个对象，可以管理多个状态。

现在我们来看一个小例子，比如我有两个组件A和组件B

在项目根目录下新建一个store文件夹，并在该文件夹下新建一个index.js文件，为了在所有子组件内都能使用这个store,我们在入口js文件(main.js)引入store文件夹下的index.js（通过import store from ‘./store’）,再把store挂载在vue实例下面作为vue实例中的一个属性store

store/index.js

Vue.use(Vuex);
export default new Vuex.Store({
state: { count: 0 }
});

组件A：
export default {
computed: { //通过计算属性来返回count状态，当状态发生改变时，都会重新计算结果
count: function(){
return this.$store.state.count //
}
}
}

当A组件需要获取多个状态时，我们可以通过vuex提供的mapState辅助函数来帮助我们生成计算属性，方便很多。

组件A：
import { mapState } from ‘vuex’ //单独引入mapState方法

export default {
computed: mapState([‘状态1’,’状态2’,…])
}

*但是，如果如何将它与局部计算属性混合使用呢？我们可以通过es6提供的对象运算符…来合并多个对象。以便我们将最终对象传递给computed属性。

export default {
computed: {
…mapState([‘状态1’,’状态2’,…]),
arrs: function(){ //这里是我们的局部计算属性
return arr.filter(item => item.charCodeAt() > 110).join(”);
}
}
}

最后我们以后要增加其他数据时，直接可以把数据放在这个仓库(store)文件下，需要的该状态时就直接通过mapState方法来引入该状态。从而触发我们视图的更新。