vux方法

vuex 的备注

   // vuex的公用数据放置处
        state: {
            count: 0,
        },
        // (方法) 在里面可以去修改state里面的数据(在这里面不能写异步操作)
        mutations: {
            方法名 (state,vari) {
                state.count=vari
                // 传值并设置count
            }
        },
        // 异步操作
        actions: {},
        // 类似计算属性 (这个不会修改state里面的数据)
        getters: {},

常用命令

this.$store.state.变量
// 获取state里面的变量

this.$store.getters.计算名称
// 访问vuex的计算属性

this.$store.commit('方法名', 10)
// 调取mutations中的方法,并传值

this.$store.dispatch('方法名', 1)
// 调用vuex异步函数

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
       //全局数据
        //data
        list:[]
    },
    mutations: {
        //修改数据的一些方法，不允许组件直接修改全局数据，必须使用mutations内的方法进行修改
        //可以接收两个参数，第一个必须是模块的局部状态对象(state数据),个可选参数
        initList(state, list) {
            state.list = list
        }
    },
    actions: {
        //异步的一些方法，不允许该内部方法直接操作全局数据
        //可以调用mutations内的方法进行操作数据
        //可以接收两个参数，第一个必须是store对象，第二个可选参数
        getList(context) {
            axios.get('/list.json').then(({ data }) => {
                //调用mutations内的initList方法，传入数据
                context.commit('initList', data)
            })
        }
    },
    getters:{
        //Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，
        //tter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
    }
})

//state(数据|状态)
this.$store.state.list
import {mapState,mapActions,mapMutations,mapGetters} from 'vuex'
computed:{
    ...mapState(['list'])//...展开符
    //这种方法在使用时候就像使用自身计算属性一样，直接使用list
}
//mutations
this.$store.commit('initList',list)
methods: {
    ...mapMutations(['initList'])
}
//这种方法在使用时候就像使用自身方法一样一样，直接使用initList(list)
//actions
this.$store.dispatch('getList')
methods: {
    ...mapMutations(['initList']),
    ...mapActions(['getList'])
}
//这种方法在使用时候就像使用自身方法一样一样，直接使用getList()
//getters
this.$store.getters.name//name:方法名
computed:{
    ...mapState(['list'])//...展开符
    ...mapGetters(['name'])
    //这种方法在使用时候就像使用自身计算属性一样，直接使用方法名
}