vuex学习

vuex学习

• 总之vuex的方法不多，下面只总结一下需要用到的
• state 状态 就是数据源
• getter 就是相当于一个计算属性 根据传过来的state去获取数据
• 最主要的是改变状态，改变状态又分为两步 ：
  1是获取数据 即是通过方法行为去获取 即使actions，去执行一些操作去更改或获取数据，然后调用mutation中的方法去把对应的状态与数据传递过去
  2是把从actions传过来的状态在mutations中就行更改

state 访问状态对象

• 可以当成是固定的参数，用来生成返给页面使用的根据
  获取state的三种办法
• 1通过computed属性去获取(不好 还要一个个去获取)

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

• 2通过vuex自带的方法mapState 还是写在computed里面

  computed: mapState({
    count: state => state.count  //传入state,返回state.count
    // 大概就是 count = state.count
  })

• 3通过mapState数组去赋值(最方便)

  computed: mapState(["count"])

• 4 我觉得还是这种语法比较好，自己去映射

  computed: {
    // 映射State
    ...mapState([
      'hotProducts'
    ])
  },

getter 获取处理后数据

• getter主要是过去处理state后的数据，也类似于方法， 就是把state里面的数据传过来，然后getter里面的方法去处理后返回.也就是一个再加工再过滤的过程
• 定义

  const getters = {
    count: function(state) {
      return state.count += 100
    },
    // 箭头函数定义
    isShowSearchBar:state=>stateisShowSearchBar
  }

• 使用通过store对象去获取 都一样，喜欢第一种

computed: {
  ...mapState(["count"]),
  count() {
    return this.$store.getters.count
  }
}

actions 异步修改状态或者就是获取数据

• 其实这里就是一个个的方法，就是获取数据，把数据当成参数去调用mutations去改变数据

  const actions = {
    //上下文对象 context就相当于store
    addAction(context) {
      context.commit('add', 10)
    },
    //直接把commit对象传过来用
    reduceAction({commit}) {
      commit('reduce')
    }
  }

• 这里还要提到一个方法，是用来把action的方法放到页面里直接去调用的

  methods:{
    ...mapActions(['getHotProducts'])
  }

mutations 提交改变状态

• 调用改变状态

  const mutation = {
    add(state, n) {
      state.count += n
    },
    reduce(state) {
      state.count -= 1
    }
  }

mutatins-types

• 就是相当于统一命名一样 方法状态库

---

自己想的 如果有错误 欢迎指出