1、npm install vuex --save
报错：vuex is not defind；配置时注意vuex的大小统一。
2、新建store.js：
import Vue from 'vue' //引入vue
import Vuex from 'vuex' // 引入vuex
Vue.use(Vuex) // 注册vuex
export default new Vuex.Store({ // 暴露与new vuex
state: { // 相当于vue里data 存放整个项目的各个状态
number: 0
},
mutations: {
//相当于vue里的methods放方法的，
// 定义一些可以用来调用和修改state里的状态值
addFun(state, num) {
state.number = num
}
}
})
组件中：
<template>
<div class="review">
{{numbertxt}}
<button @click="addfun(1)">按钮1</button>
<button @click="addfun(2)">按钮2</button>
</div>
</template>
<script>
import Store from "../store/store.js";
// import { mapState } from "Vuex";
// import { mapGetters } from "vuex";
export default {
Store, //实例注入
computed: {
//实时监听
numbertxt() {
// 实时监听在store.js里的值改变
return Store.state.number;
}
},
methods: {
addfun(num) {
Store.commit("addFun", num);
//显式的提交 (commit) mutation里的方法来改变值
}
}
};
</script>
<style scoped>
</style>
vuex基本配置完成并实现