vuex 之 你必须知道的知识

 简版:

• vuex 是为了解决整个网站状态数据共享问题的,虽然有父向子,子向父等数据传递,但在网站开发过程中一些无直接关联关系的组件也需要共享相同的数据时,就需要使用 vuex 了

vuex 中有五个主要的成员:

• state 是用来存储数据的
• mutations 是用来修改 state 中的数据的方法
• actions 是用来处理一些异步操作数据的行为方法
• getters 有点类似计算属性,是对 state 中的数据做了一些处理
• modules 是用来对复杂业务分模块的,每个模块也可以有 state,mutaions,actions,getters

 --------------------------------------------------------------------------------------------------------------------------------

 

state状态:(存储数据)

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。

  // 1.state作用：存储数据
  state: {
    // 用户信息
    userInfo: {
      name: '张三',
      age: 20
    },
    }

组件中如何获取vuex中的数据?

1. this.$store.state.xxx

2. html结构中this可以省略

    <div class="user" >
      <h3>用户信息</h3>
      <p>姓名：{{ $store.state.userInfo.name }}</p>
      <p>年龄：{{ $store.state.userInfo.age }}</p>
      <button>点我修改</button>
    </div>

 也可以写在计算属性中

  computed: {
     计算属性：本质还是访问vuex中的数据
     userInfo () {
       return this.$store.state.userInfo
     },

    <div class="user" >
      <h3>用户信息</h3>
      <p>姓名：{{ userInfo.name }}</p>
      <p>年龄：{{ userInfo.age }}</p>
      <button>点我修改</button>
    </div>

state辅助函数-mapSatate

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

<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>

    <div class="user" >
      <h3>用户信息</h3>
      <p>姓名：{{ userInfo.name }}</p>
      <p>年龄：{{ userInfo.age }}</p>
      <button>点我修改</button>
    </div>

 相当于简化了写法

getters派生状态

getters作用： state的计算属性

state: {
    // 商品数量
    count: 5,
    // 商品价格
    price: 100
}

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

 原始写法

    <div class="shopcar">
      <h3>购物车数量</h3>
      <p>当前数量：{{ $store.state.count }}</p>
       <p>总价格：{{ $store.getters.total }}</p>
      <button>点我购买</button>
    </div>

 辅助函数-mapGetters

// 导入mapGetters辅助函数
import { mapGetters } from 'vuex'

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

    <div class="shopcar">
      <h3>购物车数量</h3>
      <p>当前数量：{{ $store.state.count }}</p>
       <p>总价格：{{ total }}</p>
      <button>点我购买</button>
    </div>

 

Mutations同步更新state数据

state数据的修改只能通过mutations，并且mutations必须是同步的

Mutations是更新state数据的唯一方式！！

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

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

  • 专业术语载荷：表示额外的参数

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

 这个事件名就是Mutation中的函数名。（类似于$emit的一种事件通知机制）

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

 绑定一个点击事件

<button @click=" changeUserInfo ">点我修改</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

mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入

一定要注意： mapMutations是写在methods中的， mapState和mapGetters是写在computed中的

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

Actions异步更新state数据

action作用：异步更新state数据

action在执行完异步操作之后，还是会通过mutations来更新state数据，因此使用action一定要先声明mutations

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

methods: {
      action名 (载荷) {
          this.$store.dispatch('action名'，载荷)
      }
 }

actions辅助函数-mapActions

import { mapActions } from 'vuex'
methods: {
    ...mapActions(['action名'])
}

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

<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

• modules作用：模块化处理vuex数据