Vuex的基本使用

Vuex分成五个部分

1. state：存放状态数据的地方，其中数据是响应式的，数据改变对应组件的数据也会跟新改变，禁止直接改变state中的数据否则数据无法被调试工具监测
2. getter：为store的计算属性，能读取state中的数据
3. mutations：是改变state中数据的唯一方法，修改数据是同步的。
4. actions：提交mutations修改数据，与mutations功能类似，但修改数据是异步的
5. modules：当store过于臃肿时，可使用modules将store分割成模块，每个模块中都有自己的state、getter、mutations、actions

创建store

//文件目录src/store/index.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

export default new Vuex.store({
    state: {
        count: 1
    },
    getters: {
        getCount:(state) => state.count * 10
    }
    //mutations可更改状态的逻辑，同步操作
    mutations: {
        setCount(state,data){
            state.count = data
        }
    },
    //提交mutations，异步操作
    actions: {
        asGetCount(context, name){
            //延迟1s提交mutations中的方法
            setTimeOut(()=>{
                context.commit("setCount",name)
            },1000)
        }
    },
    // 将store模块化 
    modules: {
    
    },
})

页面使用

import { mapState, mapGetters,mapMutations, mapActions } from "vuex"

 methods: {
    //用于生成与 mutations 对话的方法，即：包含 $store.commit() 的函数
    ...mapMutations(["setCount"]),
    //用于生成与 actions 对话的方法，即：包含 $store.dispatch() 的函数
    ...mapActions(["asGetCount"]),
  },
computed: {
    // 映射 state 中的数据为计算属性
    ...mapState(["count"]),
    // 映射 getters 中的数据为计算属性
    ...mapGetters(["getCount"]),
  },
  
  
  
  //调用mutations中的方法
  this.$store.commit("setCount",666)
  //调用actions中的方法
  this.$store.dispatch("asGetCount",8888)