vuex

state为全局状态

• 组建内访问全局message状态

  • this.$store.state.message

  • import { mapState } from 'vuex'
    // mapState只需要提供转换的状态名字，就可以使用计算属性将全局状态转换为组件内部的计算属性
      computed: mapState(['message','userName']),
      computed: mapState({
        // 不能简写，后面的为字符串
       	// 组建内部使用的名字：全局状态中的名字
      	message: 'message',
      }),
    

  • 将全局的state合并到computed计算属性上

  • computed: {
        // 组件的自生的计算属性
        btnAction(){
         return 111
        },
        // 将全局的state合并到computed计算属性上
        // 辅助函数
        ...mapState({
        message: 'message',
      })
      },
    

mutations修改state的唯一方法

• mutations只可以有同步操作,无法捕捉异步操作的状态变化

• mutations: {
          // 配置方法
          modifyMsg (state,payload) {
              console.log('modifyMsg执行了。。。')
              console.log(payload)
              state.message = payload
          },
          modifyName (state, payload) {
              state.userName = payload.firstname + payload.lastname
          },
          testMutations (state) {
              state.value_1++
          }
      },
  

• 组件内使用

• // this.$store.commit触发mutations内的modifyMsg方法执行state状态的修改
  this.$store.commit('modifyMsg',this.value)
  this.$store.commit({
       type: 'modifyMsg',
       value: this.value
  })
  

actions

• // actions 可以包含异步操作
  // actions 不能修改state
  // 只能通过mutations修改state
      actions: {
          // context 为store
          modifyValue (context,payload) {
              console.log('modifyValue执行了。。。')
              setInterval(() => {
                  // 触发mutations内的testMutations方法执行state状态的修改
                  context.commit('testMutations')
              },1000 )
          }
      }
  

• // this.$store.dispatch触发actions内modifyValue方法
  this.$store.dispatch('modifyValue')
  

getters 全局的计算属性

modules vuex模块管理

• 针对以上几个概念进行模块划分
• 每一个vuex的module都有state、mutations、getters、actions的配置
• 模块的命名空间 namespaced: true
• 当模块有命名空间时，调用的时store的根模块，调用user模块内的modifyValue
• this.$store.commit(‘user/modifyValue’,’test’)

axios数据请求

• 看文档