第一步
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)//调用
console.log(this.num)//查看结果
},
methods: {
...mapMutations(["addNum"]),//引入mutations内的方法
},
}