vuex的简单存取

我们在项目中肯定会遇到存取的问题，所以我现在所说的就是vue中自带的vuex
vuex中有state（数值），mutations（同步方法），actions（异步方法），modules（模块化），getters（计算属性）五大模块

vuex官网

项目在创建的时候里面有个文件夹是store这个就是vuex，我们在里面创建的一个文件夹，我写的是modules/index.js，这个是模块化
store中也有index.js

import Vue from 'vue'
import Vuex from 'vuex'
import module from './modules/index'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    module
  },
})

modules/index.js

export default {
    namespaced:true,//这个是命名看见
    state: {//存一个值
        count:0
    },
    mutations: {//同步方法
        countChange(state,count){
            state.count=count
        }
    },
    actions: {//异步方法
        countAction({commit},count){
            commit('countChange',count)
        }
    },
}

在你用到的页面调用vuex

{{count}}
//页面展示

//mapActions调用一异步方法，mapMutations同步方法，mapState获取数值
//第一个参数是你封装的名字，第二个是你想要的方法或值
import  { mapActions,mapMutations,mapState} from 'vuex'

 computed:{
    ...mapState('module',['count'])
  },
  methods: {
    ...mapActions('module',['countAction']),
    ...mapMutations('module',['countChange']),
    ths.countAction('你想存的值')
}