Vuex知识点

1.vuex简单介绍

vuex是一个专门为vue.js提供的数据状态管理器，它主要作用就是解决组件之间数据共享和数据存储修改，代码简洁方便维护。

2.vuex的搭建和使用

安装：cnpm install vuex -S

(1):在项目创建store文件在创建一个js文件，里面引入vue和vuex.

(2)然后在main.js文件引入store文件，挂载在vue实例中

(3)vuex的使用：

修改state状态通过过事件触发 this.$store.commit(“自定义方法名”,要传递给vuex的值)。在vuex的mutatons属性接受

mutatons：{
> ####    自定义方法名(state状态，传递过来的值){
> ##### ......一些逻辑
> #### }

vuex的主要的五大属性：

(1)state项目状态存储

(2)mutations修改state状态属性

(3)actions异步操作

(4)modules模块属性

在store创建一个js.文件，把这个js文件当作做一个子仓库，然后在父仓库引入子仓库。然后在modules属性上添加子仓库自定义的名称。

命名空间：需要在子仓库引入namespaced:true,这个必须添加

空间命名 在store文件的index.js文件

(5)getter相当于计算属性computed

辅助函数

mapState辅助函数

1. 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。
2. // 在单独构建的版本中辅助函数为 Vuex.mapState
   import { mapState } from ‘vuex’
   export default {
   // …
   computed: mapState({
   // 箭头函数可使代码更简练
   count: state => state.count,
   // 传字符串参数 ‘count’ 等同于 state => state.count
   countAlias: ‘count’,
   // 为了能够使用 this 获取局部状态，必须使用常规函数
   countPlusLocalState (state) {
   return state.count + this.localCount
   }
   })
   }

getters辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性，与state类似

import { mapGetters } from ‘vuex’

export default {
// …
computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
…mapGetters([
‘countDouble’,
‘CountDoubleAndDouble’,
//…
])
}
}

如果你想将一个 getter 属性另取一个名字，使用对象形式：

mapGetters({
// 映射 this.double 为 store.getters.countDouble
double: ‘countDouble’
})

mapMutations 辅助函数

与其他辅助函数类似，你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import { mapMutations } from ‘vuex’

export default {
//…
methods: {
…mapMutations([
‘increment’ // 映射 this.increment() 为 this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …s.add() 为 this.store.commit(‘increment’)
})
}
}