VueX_映射的计算属性的名称与 state 的子节点名称相同是怎么样的

VueX（Vue状态管理模式)

1、首先应该了解什么是vuex？

vuex是适用于在vue开发项目时使用的状态管理工具。

2、阐述vuex在项目中的使用过程和搭建过程？

• 首先在src目录下创建一个sotre文件夹，然后在文件夹中创建一个index.js文件

• 接着就是store仓库的安装了

  安装：cnpm install store --save
  在main.js中引入：import store from './store'
  把store挂载到当前vue实例上
  1
  2
  3

• 下一步就是安装vuex

   安装：cnpm install vuex --save
   初始化store下的index.js内容： import Vue from "vue"
   						      import Vuex from "vuex"
   							  Vue.use(Vuex)
   							  let store =  new Vuex.Store({})
   							  export default store
  1
  2
  3
  4
  5
  6

3、vuex在项目中的应用？（属性）

• state：是仓库，用来存储状态（变量）。在组件中通过使用 this.$store.state.属性名 来使用
• mutations：用来写方法，它是可以直接操作state中的数据，可以同步，但是不可以异步。在组件中通过使用 this.$store.commit(“方法名”,参数) 来使用，和组件中的自定义事件类似。当我们需要提交多个参数时，就可以把他们放在一个对象中来提交
• getters：类似于state的计算属性。在组件中通过使用 this.$store.getters.方法名 来使用
• actions：在mutation中进行提交，会引起数据失效，所以用actions来进行异步修改状态。由于是异步操作，所以就可以为异步操作封装一个promise对象。在组件中通过使用 $store.dispath(’’) 来使用。
• models：它是命名空间的处理，为了开发大型项目，可以使用模块化管理模式。每个模块都拥有自己的state、mutation、action、getter。我们在使用的过程中，首先需要在store仓库下新建一个person.js文件，在文件中写state、mutations、actions、getters，然后在store仓库下的index.js文件中的models下挂载person.js文件，这样就可以使用了。
• plugins：类似于本地仓库
  下载：cnpm install vuex-persistedstate --save
  首先需要在store仓库中引入：import createPersistedState from “vuex-persistedstate”
  然后在 let store下写入：plugins:[createPersistedState()]

4、vuex辅助函数

vuex为我们提供了一些非常方便的辅助函数，比如mapState、mapGetter、mapMutation、mapAction

• mapState：引入：import { mapState } from 'vuex
  有三种方式：
  • 第一种：对象：如果使用箭头函数，当vuex中的state和当前组件的state，含有相同的变量名称时，this获取的是vuex中的变量，而不是局部变量
    computed: mapState({
    // 箭头函数
    count: state => state.count,
    // 这里为了能够使用this获取局部变量localCount，必须使用常规函数
    countPlusLocalState (state) {
    return state.count + this.localCount
    }
    })
  • 第二种：数组：当映射的计算属性名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组。
    computed: mapState([
    // 映射 this.count 为 store.state.count
    ‘count’
    ])
  • 第三种：对象展开运算符：mapState函数返回的是一个对象。如果需要将它与局部计算属性混合使用时，通常我们需要一个工具函数将多个对象合并为一个，因此我们可以将最终对象传给computed属性。也可以使用...mapState([])，但前提是映射的计算属性名称与state的子节点名称相同，如果state在vuex的modules中，则不成功。
    computed: {
    localComputed () {},
    …mapState({})
    }
• mapGetters：将store中的getter映射到局部计算属性
  computed: {
  …mapGetters([
  ‘oneGetter’,
  ‘anotherGetter’
  ])
  }
• mapMutations：使用mapMutations辅助函数将组件中的methods映射为store.commit调用。
  methods: {
  // 将this.tips映射成 this.$store.commit(‘tips’)
  …mapMutations([‘tips’])
  }
• mapAction：使用mapActions辅助函数将组件中的methods映射成store.dispatch调用
  methods: {
  // 将this.tips映射成 this.$store.dispatch(‘tips’)
  …mapActions([‘tips’])
  }

5、命名空间

• 概念：默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的。
• 弊端1：不同模块中有相同命名的mutations、actions时，不同模块对相同的 mutation 或 action 作出响应。
• 弊端2：当一个项目中store分了很多模块的时候，使用辅助函数时，就很难查询，不便于后期的维护。

可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
在模块中添加 namespaced: true， 开始命名空间。在根store中引入模块并挂载，在组件中使用，模块中定义的“permissionList” state

1. 第一种方式：导入辅助函数mapState
   import { mapState } from “vuex”;
   export default {
   props: {
   data: {
   type: Object,
   default: “chart”
   }
   },
   data() {
   return {
   list: {}
   };
   },
   computed: {
   // 在辅助函数mapState的第一参数上，填写上模块的命名空间名。根据挂载方式不同，此处的命名空间名就是 wechatType 或 aaa。
   …mapState(‘命名空间名’, [“permissionList”])
   },
2. 第二种方式：通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数
   import { createNamespacedHelpers } from “vuex”;
   const { mapState } = createNamespacedHelpers(‘命名空间名’)
   export default {
   computed: {
   …mapState([“permissionList”])
   }
   ｝