tilemap原理 mapstate原理

1. 状态管理分为三部分：state、view、actions。整个vuex核心是store，vuex的状态是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。不能直接更改store中的状态，改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
2. state：从store实例中读取状态的最简单方法是在计算书型中返回某个值。vuex通过store将状态从根组件“注入”到每个子组件中

当组件需要获取多个状态时，使用mapState辅助函数生成计算属性。

3. Getters：从state派生出的状态。（比如对数据进行加减运算、过滤等操作），使用mapGetters
4. Mutation：提交mutation是更改vuex的store中状态的唯一方式，必须同步。store.commit(’’)
5. Action类似于mutation，两点不同：

1）Action提交的是mutation，而不是直接变更的状态

2）Action可以包含任意异步操作

action通过store.dispatch触发，通过context.commit提交状态，通过context.state和context.getter获取state和getters

6. Modules：将store分割成模块

State
单一状态树
Vuex 用一个对象就包含了全部的应用层级状态。
作为唯一数据源，每个应用将仅仅包含一个 store 实例。
单状态树、模块化、状态、状态变更事件分布
由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

computed: {
    count: function () {
		return this.$store.state.count
	}
}

每当 this.$store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
state在vuex中的定位类似于data在vue中的定位：state(vuex) ≈ data (vue)
都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件。

也就是当你改变值的时候可以触发dom的更新.

state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.
当然使用data去接收$store.state也可以接收到值,但由于这只是一个简单的赋值操作,
因此state中的状态改变的时候不能被vue中的data监听到。

mapState 辅助函数
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。
mapState是state的语法糖,辅助函数帮助生成计算属性。

mapState（辅助函数）
数组写法（一般情况下不用）

mapState（辅助函数）

第二种写法 对象写法（经常用）

数组写法

还有一张图

console.log

modules：

关于a的命名互不冲突

作用于多人协作开发

namespaced：true

当导出子模块的时候切记加一个namespaced：true作用是可以使当时模块的数据私有化