Vuex的基本使用

        1.安装vuex

npm i vuex@3

            2.引入

import Vuex from 'vuex'

        3.使用

Vue.use(Vuex)

       

         4.在src下的目录创建store，新建index.js

import store from './store'

        5.编写index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)


//用于操作组件中的动作
const actions={
      add(context,value){
        context.commit('ADD',value)
      }, 
}
//用于操作数据
const mutations={
    ADD(state,value){
      state.sum += value
    } , 
}
//用于存储数据
const state={  
    sum:1, 
}
//公共方法
const getters={
   getT(state){
    return state.sum*10
   }
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})
 

        6.在main.js中引入并使用store

import store from './store'

store,

        

        7.在组件中调用store中的方法

                7.1获取state中sum的值

{{this.$store.state.sum}}

                7.2获取getters中的getT方法

{{$store.getters.getT}}

                7.3调用store中的add方法，通过 dispatch  在组件中访问vuex的actions，通过commit   在组件中访问vuex的mutations

this.$store.dispatch('add',this.s)

this.$store.commit('ADD',this.s)

                7.4启动项目 ,可以看到我们的功能都还可用

npm run serve