vue添加vuex,附簡(jiǎn)單使用流程

第一步

npm install vuex -S

第二步 建立vuex文件夾,建立store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
    num:1,
}
    
const mutations = {
    addNum(state,msg){
        state.num = msg++
    },
}

const actions = {

}

export default new Vuex.Store({
    state,
    mutations,
    actions
})

第三步 在mian.js引入

import store from './vuex/store'
new Vue({
  el: '#app',
  router,
  store,//在vue中引入使用
  components: { App },
  template: '<App/>'
})

第四步 使用

export default {
    name:'text',
    computed: {
        ...mapState(["num"]),//引入state的num字段
    },
    data() {
        return {
          a: 1,
        }
    },
    mounted() {
        this.addNum(a)//調(diào)用
        console.log(this.num)//查看結(jié)果
    },
    methods: {
        ...mapMutations(["addNum"]),//引入mutations內(nèi)的方法
    },
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容