• vue官方提供的独立于组件体系之外的，管理公共数据的工具

1.store 保存公共数据

• 格式

  state() {
    return {
       属性名： 属性值 
    }
  }
复制代码

• 使用公共数据

1. 在任意组件中，通过this.$store.state.属性名来访问。
2. 在模板中，则可以省略this而直接写成： {{$store.state.属性名}}
3. state是响应式的： 如果修改了数据，相应的在视图上的值也会变化。

2.mutations 修改

• 通过调用mutations来修改定义在state中的公共数据。
• 第一个参数是必须的，表示当前的state。在使用时不需要传入
• 第二个参数是可选的，表示形参，是可选的。在使用时要传入的数据

  mutations：{
    // 每一项都是一个函数，可以声明两个形参
    mutation名1 (state,形参) {
  
    },
    mutation名2 (state,形参) {
  
    }
   }
复制代码

使用格式

this.$store.commit('mutation名', 实参)
复制代码

3.actions axios发异步请求

  actions: {
    //操作 store 所有项 一般用来发axios
    // context 查看 store 所有项必写
    action的名字 (context, 形参) {
      // 1. 发异步请求, 请求数据
      
      // 2. commit调用mutation来修改数据
            context.commit('mutation名', 实参)
    }
  }
复制代码

在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action

4.getters 计算

  getters: {
    // state 就是上边定义的公共数据state
    getter的名字1: (state) {
      return 要返回的值
    }
  }
复制代码

使用格式

在组件中通过：$store.getters.getter的名字 来访问

5.modules 模块拆分

格式

export default new Vuex.Store({
  // state: 用来保存所有的公共数据
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    模块名1： {
        // namespaced为true，则在使用mutations时，就必须要加上模块名
      	namespaced: true, 
        state: {},   
  	getters: {},
  	mutations: {},
  	actions: {},
  	modules: {}
    }，
    模块名2： {
        // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
  	state: {},
  	getters: {},
  	mutations: {},
  	actions: {},
        modules: {}
    }  
  }
})
复制代码

Vuex-辅助函数mapState对数据重命名

目标

掌握mapState对数据重命名的用法。

场景

vuex中的数据与本组件内的数据名相同

格式

...mapState({'新名字': 'xxx'})

Vuex-map函数用法汇总

如何使用全局state

• 直接使用： this.$store.state.xxx;
• map辅助函数：

computed: { 
  // 省略其他计算属性
  ...mapState(['xxx']), 
  ...mapState({'新名字': 'xxx'})
}

如何使用modules中的state

• 直接使用： this.$store.state.模块名.xxx;
• map辅助函数：

computed: { 
  ...mapState('模块名', ['xxx']), 
  ...mapState('模块名', {'新名字': 'xxx'})
}

如何使用全局getters

• 直接使用：this.$store.getters.xxx
• map辅助函数：

computed: { 
  ...mapGetters(['xxx']), 
  ...mapGetters({'新名字': 'xxx'})
}

如何使用modules中的getters

• 直接使用： this.$store.getters.模块名.xxx
• map辅助函数：

computed: { 
  ...mapGetters('模块名', ['xxx']), 
  ...mapGetters('模块名',{'新名字': 'xxx'})
}

如何使用全局mutations

• 直接使用：this.$store.commit('mutation名', 参数)
• map辅助函数：

methods: { 
  ...mapMutations(['mutation名']), 
  ...mapMutations({'新名字': 'mutation名'})
}

如何使用modules中的mutations（namespaced:true）

• 直接使用： this.$store.commit('模块名/mutation名', 参数)
• map辅助函数：

methods: { 
  ...mapMutations('模块名', ['xxx']), 
  ...mapMutations('模块名',{'新名字': 'xxx'})
}

如何使用全局actions

• 直接使用：this.$store.dispatch('action名', 参数)
• map辅助函数：

methods: { 
  ...mapActions(['actions名']), 
  ...mapActions({'新名字': 'actions名'})
}

如何使用modules中的actions（namespaced:true）

• 直接使用： this.$store.dispatch('模块名/action名', 参数)
• map辅助函数：

methods: { 
  ...mapActions('模块名', ['xxx']), 
  ...mapActions('模块名',{'新名字': 'xxx'})
}