vue之vuex使用步骤

第一步：下载安装vuex

$ cnpm install vuex -S

第二步：创建store.js文件

//vuex配置
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//定义属性的方法
var state={count:null}
var getters={count(state){return state.count}}
//如果有需要可以传递参数id
const actions={add(context,id){context.commit('add',id)}}
const mutations={add(state,id){state.count=id}}
//创建对象并导出
const store=new Vuex.Store({ 
    state,
    getters,
    actions,
    mutations
})
export default store

第三步：在main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//导入文件夹
import store from './store'
Vue.config.productionTip = false
new Vue({
  router,
//在Vue中配置选项 store
  store,
  render: h => h(App),
}).$mount('#app')

第四步：在组件中访问

//导入
import {mapGetters,mapActions,mapState} from 'vuex'
//获取state
computed:mapState(['count'])
methods: {
//获取属性（数据）
    ...mapGetters(['count']),
//获取方法（动作）
    ...mapActions(['add'])
  }

最后，记得在标签中绑定触发add的事件噢，功能就完善了