Vuex终于搞懂你

VUEX都有些什么

不要使用this.$store.state = 1 的方式去修改state对象

不要在actions中直接操作state

所有的数据操作函数都放在mutations中需要修改state时调用mutations来修改

   new Vuex.Store()构造函数
   state        //Vuex数据对象
   mutations    //Vuex操作数据函数（同步）不接受任何异步
   actions      //Vuex异步函数 通过actions 触发mutations来修改数据

如何使用Vuex

npm i vuex --save 引入 安装依赖

新建一个store.js文件

import Vue  from ‘vue’
import Vuex from  ‘vuex’
const store = new Vuex.Store({
    state:{},
    mutations:{},
    actions:{}
})
export default store

//在main.js中
import Vuex from ‘vuex’
Vue.use(Vuex)使用vuex 

在VUE页面中使用

import {mapState} from  ’vuex’
import{mapMutations}form ‘vuex'Ï
compoted:{
    …mapState([‘count'])
}
//使用mapMutations
methods:{
    …mapMutations([’subN’]),
    sub(){
        this.subN(2)
    }
}

使用actions

//actions是用来处理vuex中的异步操作使用的
//actions不能直接修改state中的数据
//actions依旧使用mutations中的函数来操作state中 的数据
//在store.js中创建actions对象
const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
        add(state){
            state.count++
        }
    },
    actions:{
        asyncAdd(context){
            setTimeout(() =>{
                context.commit(‘add')
            })
        }
    }
    
})

页面中使用

   this.$store.dispatch('asyncAdd',5)