vue学习-vuex

官网vuex
原理图：

第一步
创建一个store

//index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

第二步
为 Vue 实例提供创建好的 store

new Vue({
  el: '#app',
  store
})

state

存储数据

//组件counter
 <template>
 <div>{{ count }}</div>
 </template>

读取数据的方法

 export default{
  computed: {
    count () {
      return this.$store.state.count
    } } }

mapstate辅助函数
写法

import { mapState } from 'vuex'
 export default{
  computed:mapState({  count: state => state.count,})
   mapState([
  // 映射 this.count 为 store.state.count
  'count'
])
    ...mapState({ }) } //三种写法

Getter

从 store 中的 state 中派生出一些状态，用getter
可以认为是 store 的计算属性，就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Getter 接受 state 作为其第一个参数：

const store = new Vuex.Store({
  state: {
    username:sun
  },
  getters: {
    setUserName: state => {
      return ${state.username}${xiaolin}
    }
  }
})

访问 通过属性

Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：

store.getters.setUserName

Getter 也可以接受其他 getter 作为第二个参数：

getters: {
   setUserName: state => {
      return ${state.username}${xiaolin}
    }
  UserName: (state, getters) => {
    return getters.setUserName
  }
}

store.getters.UserName

在其他组件使用他

export default{
computed: {
  setUserName() {
    return this.$store.getters.setUserName
  }
}
}

通过方法访问

mapGetters 辅助函数

import { mapGetters } from 'vuex'

export default {
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'setUserName',
      'UserName',
    ])
    //将一个 getter 属性另取一个名字，使用对象形式：
    ...mapGetters({
  // 把 `this.peoplename` 映射为 `this.$store.getters.UserName`
  peoplename: 'UserName'
})
  }

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
mutation 类似事件：
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：
type是 increment handler是后面的

store.commit('increment')

提交载荷（Payload）
可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）

mutations: {
  increment (state, n) {
    state.count += n
  }
}
store.commit('increment', 10)

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})

对象风格的提交方式

store.commit({
  type: 'increment',
  amount: 10
})

Mutation 需遵守 Vue 的响应规则

1. 最好提前在你的 store 中初始化好所有所需属性。
2. 当需要在对象上添加新属性时，你应该

• 使用 Vue.set(obj, ‘newProp’, 123), 或者
• 以新对象替换老对象。例如，利用对象展开运算符我们可以这样写：

state.obj = { ...state.obj, newProp: 123 }

可以使用常量替代 Mutation 事件类型
Mutation 必须是同步函数