vuex

核心: store(仓库)

state: 状态
getters: 对 state 的派生，可以理解为 store 的计算属性

• 存放针对store的state数据或者其他getter数据做的计算属性
• 1. state 自动接收到的当前store的state对象
• 2. getters 自动接收到的当前state的getters对象
• 3. 必须有返回值
• 4. 它也不能直接修改
     mutations: 修改 state 的唯一操作就是提交 mutation。
• 唯一能修改仓库state数据的地方
• 1. state 是自动接收到的当前的state对象
• 2. payload 是提交这个 mutation 时，传递过来的参数
     actions: 类似于 mutations , 用来处理异步。
• 存放异步的动作，它也不能直接去修改state的。而是在里面调用了mutation
• 1. context 是自动接收到的当前的 store 实例对象（上下文）它里面有 state、getters、commit、dispatch 等。
• 2. payload 是派发这个 action 时，传递过来的参数
     modules: 对仓库 分割成 模块

mapState(): sate的辅助函数
mapGetters(): getters的辅助函数
mapMutations(): mutations的辅助函数
mapActions(): actions的辅助函数

一、使用 state 数据

一定是通过computed去使用

1. 最简单的方式

computed: {
  card () {
    return this.$store.state.card
  }
}

2. 推荐的方式, mapState() 辅助函数的方式

import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['card'])
  }
}

二、使用 getters 数据（相当于计算属性，依赖变化，重新计算）

一定是通过computed去使用

1. 最简单的方式

computed: {
  total () {
    return this.$store.getters.total
  }
}

2. 使用 mapGetters 辅助函数

import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['total'])
  }
}

三、使用 mutations 方法（改变数据的方法（突变））

首先针对某个state数据提供一个mutation(突变)
官方不建议我们直接修改store的数据，而是提交一个commit请求，mutations去变

1. 最简单的方式

methods: {
  handleAdd () {
    this.$store.commit('xxmutation', 'payload参数')
  }
}

2. mapMutations 辅助函数

import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['DEL_CARD'])
  }
}

四、使用 actions（用于写异步代码）

首先仓库中的先定义action

1. 最简单的方式

methods: {
  handleAdd () {
    this.$store.dispatch('xxAction', 'payload参数')
  }
}

2. 使用 mapActions()

import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(['ADD_CARD_ASYNC'])
  }
}

五、taopp实例代码

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

Vue.use(Vuex)

const city = window.localStorage.getItem('city')
let cinema = decodeURI(window.localStorage.getItem('cinema'))
const userInfo = window.localStorage.getItem('userInfo')
const token = window.localStorage.getItem('token')
export default new Vuex.Store({
  state: {
    city: city ? JSON.parse(city) : null,
    // 用户信息存储
    userInfo: userInfo ? JSON.parse(userInfo) : null,
    // token
    token: token || null,
    cinema: cinema ? JSON.parse(cinema) : null
  },
  mutations: {
    // xxh影院详情方法
    RESET (state, item) {
      state.cinema = item
      window.localStorage.setItem('cinema', encodeURI(JSON.stringify(item)))
    },
    // zk同步localStorage城市数据
    SET_CITY (state, city) {
      state.city = city
      window.localStorage.setItem('city', JSON.stringify(city))
    },
    SET_USER_INFO_AND_TOKEN (state, payload) {
      state.userInfo = payload.userInfo
      state.token = payload.token
      window.localStorage.setItem('userInfo', JSON.stringify(payload.userInfo))
      window.localStorage.setItem('token', payload.token)
    }
  },
  actions: {
  },
  modules: {
  }
})