Vuex学习整理

https://vuex.vuejs.org/zh/guide/

vuex核心函数	vue的使用	关键使用
state	computed	...mapstate（对象操作符号）
getter	computed	...mapGetters(辅助操作符)
mutation	method	commit提交，同步，使用常量替代函数名称
action	method	dispatch提交 ...mapAction 辅助函数
module	无

mutations的使用

mutations的使用比较特殊，不能通过mutation直接调用，需要通过commit方法，并且mutations中是使用同步调用，举例来说，如果需要修改count的之可以直接通过this.$store.commit(this.$store.state.count ++'),
但是对于多个地方修改同一个值的时候，会让人不知道为什么修改，这个是可以通过this.$store.commit('increment')修改，相当于增加了给代码增加了注解。官方不推荐直接修改，同构increment相当于动态变化跟踪，利于代码的阅读，

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

• 使用对象提交

add() {
                this.$store.commit('increment', {data:1})
            },

//store.js
increment(state,n){
            state.count +=n.data
        },

• 使用常量替换操作类型(调用方法)

//store/index.js
    import {MUTATION_TYPE} from '../util/mutations-constant'
mutations: {
        [MUTATION_TYPE](state,n) {
            state.count += n.data
        },
       
    }

//Next.vue
    import {MUTATION_TYPE} from '../util/mutations-constant'
 add() {
                this.$store.commit(MUTATION_TYPE,{data:1})
            },

'mapState'使用

如果一个组件有多个状态，组件的状态存放在store种，可以通过mapState来监听变化（当然可以通过计算属性，但是官方说的是计算属性有些冗余）
官方例子

// store/index.js
const store  = new Vuex.Store({
  state :{
    count:0
  },
  mutations:{
    increment(state){
      state.count++
    },
    decrement(state){
      state.count--
    }
  }
})
export default  store



//next.vue

export default {
        data() {
            return {
                localData: 10
            }
        },
        name: "Next",
        computed: mapState({
            count: state => state.count,  //1
            countAlias: 'count', //2
            countPlusLocalState(state) { //3
                return state.count + this.localData
            }
        }),
    }

1和2都是在组件种声明一个属性，对应的是store种的state，3是定义的一个常规函数,用来和本地数据计算计算。

对象操作运算符（我的理解是更加方便的写法，更容易阅读代码）,可以让它与局部计算属性混合使用

  computed: {
          //本地的其他一些计算方法
            ...mapState({
                count: state => state.count
            })
        },

getters函数的使用：根据某些条件过滤掉数组，例如购物车中有许多商品，最终结算的时候要剔除掉那些用户没有勾选的商品，而getters的左右是在store中过滤掉，避免在多个页面写重复逻辑。

// /stoe/index.js
const store = new Vuex.Store({
    state: {
        todos: [
            {id: 1, text: '...', done: true},
            {id: 2, text: '...', done: false}
        ]
    },
    getters:{
        doneTools :state => {
            return state.todos.filter(todo => todo.done)
        }
    }
})

使用

// /Next.Vue
methods: {
            getTodos() {
                console.log(this.$store.getters.doneTools)
            }
        }

getter中的方法可以相互调用，类似java中的重载(也不一定是重载，就是a方法可以调用b方法)

  getters:{
        doneTools :state => {
            return state.todos.filter(todo => todo.done)
        }，
      tododoneTools(state,getter){
      return getter.doneTools  
    }
    }

getter方法的可以传参，使用getters 根据id 查找数组中的元素

// /store/index.js
getters:{
      doneToolsId: state => (id) =>{
  return state.todos.find(todo => todo.id == id)    
}
}

mapGetters的使用是将store中的属性映射到局部属性中

// Next.vue



   import {mapState,mapGetters} from 'vuex'

  export default{
   name: "Next",
  computed:{
   ... mapGetters({
    'doneToolsCount'  //映射的 `/store/index.js`下的`getters`的`doneToolsCount`
})
}
}

action action其实调用的就是mutation,为什么不直接调用mutation,因为mutation必须同步执行。而action 内部可以执行异步操作

• action通过参数解构来调用mutation

//store/index.js
import {MUTATION_TYPE} from '../util/mutations-constant'
mutations: {

    [MUTATION_TYPE](state,n) {
        state.count += n.data
    },
    reduce: (state, n) => {
        state.count -= n
    }
}
,
actions:{
    add({commit},n){
        commit(MUTATION_TYPE,n)
    }
}

//Next.vue
add(){
this.$store.dispatch(add,{data:1})
},

// store/index.js
 },
    mutations: {
        [MUTATION_TYPE](state) {
            state.count += 10

        }

    },
    actions: {
        [MUTATION_TYPE](context) {
            context.commit(MUTATION_TYPE)
        }
    }

// Next.vue
  methods: {
            getTodos() {
                this.$store.dispatch(MUTATION_TYPE)
            }
        }

modules可以不同模块定义不同的store，例如登陆，购物车

// store/index.js

const moduleLogin = {
    state: {
       username:"aaa",
        psw:'1111'
    },
}
const muduelCar = {
    state: {
        count:0,
        sumprice:0
    },
}

const store = new Vuex.Store({
    modules: {
        a: moduleLogin,
        b: muduelCar,
    }
})

export default store

//使用 Next.vue

        
           10

        

  methods: {
            getTodos() {
      
                console.log(this.$store.state.a. username)
            }
        }