vuex的简单存取

191 阅读1分钟

项目在创建的时候里面有个文件夹是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


<p>{{count}}</p>//页面展示

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

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