vuex的核心

state：作用：定义全局数据(保存所以公共数据)。类似data

1
2
3
4
5
6

export default new Vue.store({
    state:{
        
    }
  })
export default store

获取数据：state

直接使用：1.this.$store.state.自定义

映射的方式：2.computed:{...mapState([''])}

注：在Vue中不推荐直接在组件内部通过this.$store.state.全局数据名称=新值来修改Vue

mutation作用：修改公共数据

1
2
3
4
5
6
7
8

const store = new Vuex.Store({
    state: {
        
    },
    mutations: {
        
    }
})

修改：mutations

直接使用：this.$store.commit('','')不推荐

map映射的方式：{ methods:{ // 相当于是在当前组件内部的methods加了对应的方法 ...mapMutations(['mutation名'，'mutation名']) } }

※action作用：可以执行异步代码；可以同时调用多个mutation

1
2
3
4
5
6
7
8

new Vuex.store ({
    state: {},
    actions: {
       函数名 :function（参数1，参数2）{
        
   }
  }
})

使用：actions

直接使用：this.$store.dispatch

map映射的方式：methods:{...mapActions ([''])}