vuex入门

目录

为什么要有vuex?

state

state辅助函数:mapState

getters:state的计算属性

辅助函数mapGetters

 Mutations同步更新state数据(官方指定唯一修改方式)

mutations辅助函数-mapMutations

Actions异步更新state数据

actions辅助函数-mapActions

modules:模块化处理vuex数据

原始语法

辅助函数语法

---

为什么要有vuex?

        全局数据管理,所有组件可共享数据

        vuex的作用是解决多组件状态共享的问题,在大型项目中,组件间的通讯灰白你的很混乱,vuex可以统一管理组件之间的通讯

        使用vuex的好处:

                1.响应式的:  只要vuex中的数据变化,对应的组件会自动更新,

                2.操作更简洁:  类似于sessionStorage,

state

        存储数据,所有的共享数据都要放在store的state中存储

        

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 1.state作用：存储数据
  state: {
    // 用户信息
    userInfo: {
      name: '张三',
      age: 20
    },
    // 设置信息
    settingInfo: {
      color: 'red',
      fontSize: '15px'
    },
    // 商品数量
    count: 5,
    // 商品价格
    price: 100
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

<template>
  <div :style="{ color:$store.state.settingInfo.color,fontSize:$store.state.settingInfo.fontSize}">
    <h2>首页</h2>
    <div class="user" >
      <p>姓名：{{ $store.state.userInfo.name }}</p>
      <p>年龄：{{ $store.state.userInfo.age }}</p>
    </div>
    <div class="setting">
      <p>颜色主题：{{ $store.state.settingInfo.color }}</p>
      <p>字体大小：{{ $store.state.settingInfo.fontSize }}</p>
    </div>
    <div class="shopcar">
      <p>当前数量：{{ $store.state.count }}</p>
    </div>
  </div>
</template>

state辅助函数:mapState

        在要使用的组件中导入mapState辅助函数： import { mapState } from 'vuex'

        在这个组件的computeds中来映射计算属性

<script>
// 导入mapState辅助函数
import { mapState } from 'vuex'

export default {
  name: 'home-page',
  computed: {
    // mapState作用：自动帮你生成计算属性 (和下面代码做的事情一样)
    ...mapState(['userInfo', 'settingInfo', 'count'])
    // 计算属性：本质还是访问vuex中的数据
    // userInfo () {
    //   return this.$store.state.userInfo
    // },
    // settingInfo () {
    //   return this.$store.state.settingInfo
    // },
    // count () {
    //   return this.$store.state.count
    // }
  }
}
</script>

getters:state的计算属性

        语法声明

new Vuex.store({
  // 省略其他...
  getters: {
    // state 就是上边定义的公共数据state
    计算属性名: function(state) {
      return 要返回的值
    }
  }
})

使用:

        $store.getters.getter的名字

// 2.getters作用
// 官方术语：从state中派生状态（使用state中的数据，计算得出一些新数据）
// 说人话： 相当于state的计算属性
getters: {
  total (state) {
  	// state:就是vuex上面的state
  	return state.count * state.price
  }
},

辅助函数mapGetters

        导入辅助函数

        import { mapGetters } from 'vuex'

        使用辅助函数

// 2.mapGetters作用: 自动帮你生成计算属性(和下面代码做的事情一样)
...mapGetters(['total'])
// total () {
//   return this.$store.getters.total
// },

 Mutations同步更新state数据(官方指定唯一修改方式)

作用:

 定义格式:

new Vue.store({
  // 省略其他...
  mutations：{
    // 每一项都是一个函数，可以声明两个形参
  	mutation名1：function(state , 载荷 ) {
  
  },
    mutation名2：function(state , 载荷 ) {

    },
}
})

• 第一个参数是必须的，表示当前的state。

• 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据

• 载荷：表示额外的参数
   

    使用格式:

        this.$store.commit('mutation名', 载荷 )

声明两个mutations:

mutations: {
    // 第一个参数state : 固定写法,就是vuex的state
    // 第二个参数载荷 : 是我们调用mutations传递的参数
    setUserInfo (state, payload) {
      state.userInfo = payload
    },
    setSettingInfo (state, payload) {
      state.settingInfo = payload
    }
  },

        给任意页面两个按钮分别绑定点击事件

<button @click=" changeUserInfo ">点我修改</button>
<button @click=" changeSettingInfo ">点我设置</button>

        使用

methods: {
    // 修改个人信息
    changeUserInfo () {
      // this.$store.commit('mutation名', 载荷 )
      // 注意点： 载荷只能有一个，如果需要传多个数据，需要包在对象中
      this.$store.commit('setUserInfo', { name: '李四', age: 30 })
    },
    // 修改设置信息
    changeSettingInfo () {
      this.$store.commit('setSettingInfo', { color: 'green', fontSinze: '20px' })
    }
}

mutations辅助函数-mapMutations

        语法

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['mutaion名'])
}

<script>
// 导入辅助函数
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
  name: 'home-page',
  computed: {
    ...mapState(['userInfo', 'settingInfo', 'count']),
    ...mapGetters(['total'])
  },
  methods: {
    // 0.mapMutations作用：自动帮你生成一个methods方法提交mutations
    ...mapMutations(['setUserInfo', 'setSettingInfo']),
    // 1.点击修改信息
    changeUserInfo () {
      // this.$store.commit('setUserInfo', { name: '李四', age: 30 })

      this.setUserInfo({ name: '李四', age: 30 }) // 与上面等价
    },
    // 2.点击修改设置
    changeSettingInfo () {
      // this.$store.commit('setSettingInfo', { color: 'green', fontSine: '20px' })

      this.setSettingInfo({ color: 'green', fontSize: '20px' }) // 与上面等价
    }
  }
}
</script>

Actions异步更新state数据

actions与mutations相同点 ：都是修改state数据

actions与mutations不同点

        mutations：同步更新

        actions: 异步更新（例如你的数据来源于ajax）

 

 语法:

new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    action的名字: function(context, 载荷) {
      // 1. 异步操作获取数据
      
      // 2. commit调用mutation来修改数据
      
      // context.commit('mutation名', 载荷)
    }
  }
})

调用格式:

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

mutations: {
    // 第一个参数state : 固定写法,就是vuex的state
    // 第二个参数载荷 : 是我们调用mutations传递的参数
    setUserInfo (state, payload) {
      state.userInfo = payload
    },
    setSettingInfo (state, payload) {
      state.settingInfo = payload
    },
    setCount (state, payload) {
      state.count = payload
    }
  },
  actions: {
    // 第一个参数context : 固定语法。 代表当前vuex对象
    // 第二个参数载荷：是我们调用action传递的参数
    setAsyncCount (context, payload) {
      // (1)异步操作
      setTimeout(() => {
        // (2)提交mutations更新
        context.commit('setCount', payload)
      }, 1000)
    }
  },

actions辅助函数-mapActions

        

import { mapActions } from 'vuex'
methods: {
    ...mapActions(['action名'])
}
//等价于:
methods: {
      action名 (载荷) {
          this.$store.dispatch('action名'，载荷)
      }
 }

直接通过 this.方法 就可以调用

        this.action名(载荷)

<script>
// 导入辅助函数
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  name: 'home-page',
  computed: {

  },
  methods: {
    省略其他代码
    ...mapActions(['setAsyncCount']),
    // 3.点击购买按钮
    doBuy () {
      // this.store.dispatch('action名',载荷)
      // this.$store.dispatch('setAsyncCount', this.count + 1)

      this.setAsyncCount(this.count + 1) // 与上面等价
    }
  }
}
</script>

modules:模块化处理vuex数据

使用mudules语法如下:

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: {}
  	}  
  }
})

原始语法

//state
全局的: $store.state.数据项名
模块的: $store.state.模块名.数据项名
//getters
全局的： $store.getters.getter名
模块的： $store.getters['模块名/getters名']
//mutations
全局的: $store.commit('mutations名',载荷) 
模块的: $store.commit('模块名/mutations名',载荷)
//actions
全局的: $store.dispatch('actions名',载荷) 
模块的: $store.dispatch('模块名/actions名',载荷)

辅助函数语法

//state
全局的: ...mapState(['数据项名']),
模块的: ...mapState('模块名', ['数据项名']),
//getters
全局的: ...mapGetters(['数据项名']),
模块的: ...mapGetters('模块名', ['数据项名']),
//mutations
// 全局的
...mapMutations(['mutaion名'])
// 模块中的
...mapMutations('模块名', ['mutaion名'])
//actions
...mapActions(['action名'])
// 模块中的
...mapActions('模块名', ['action名'])

1.vuex中有哪些配置项（核心概念）作用是什么

• state作用： 负责存储数据

• getters作用：state计算属性(有缓存)

• mutaions作用：负责同步更新state数据

  • mutaions是唯一可以修改state数据的方式

• actions作用：负责异步操作，例如发送网络请求，将请求到的数据通过commit触发mutaions来修改state

• modules作用：负责模块化管理vuex数据

•