import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);
const state = {
count: 1
}
const mutations = {
add(state, n) {
console.log("进去没add");
state.count += n;
},
reduce(state) {
console.log("进去没reduce");
state.count -= 1;
}
}
const getters = {
count: function(state) {
return state.count += 100;
}
}
// 在store.js中声明actions
const actions = {
addAction(context) {
context.commit('add', 10)
},
reduceAction({
commit
}) {
commit('reduce')
}
}
export default new Vuex.Store({
state,
mutations,
getters,
actions
});
在main.js中使用
// 导入jqury
import $ from "jquery";
// 引入路由
import routermy from "./router";
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import store from "./vuex/store"
import 'element-ui/lib/theme-chalk/index.css';
import lang from 'element-ui/lib/locale/lang/en';
Vue.use(ElementUI);
Vue.use(lang);
//开启debug模式
Vue.config.debug = true;
// 定义组件, 也可以像教程之前教的方法从别的文件引入
const First = {
template: '<div><h2>我是第 1 个子页面</h2></div>' }
// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
const app = new Vue({
store:store,
router: routermy,
render: h => h(App)
}).$mount('#app');
单独使用：
1.state:
<template>
<div>
<p>
<h2>{
{
msg}}</h2>
<hr />
<h3>{
{
$store.state.count}}</h3>
</p>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello Vuex',
}
}
}
</script>
2.getters
<template>
<div>
显示：{
{
count}}
</div>
</template>
<script>
import {
mapState,mapMutations,mapGetters } from 'vuex';
export default{
data(){
return{
}
},
computed:{
...mapGetters(['count'])
}
}
</script>
<style>
</style>
3.1.mutations1
<template>
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10000" label="描述文字"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: this.$store.state.count
};
},
watch:{
num(newData,oldData){
console.log(newData,oldData,"监听num");
if(newData>oldData){
this.$store.commit('add',newData);
}else{
this.$store.commit('reduce');
}
}
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>
3.2 mutions2
<template>
<div>
<el-button type="primary" size="mini" @click="add(4)">加</el-button>
<span>显示的次数：{
{
count}}</span>
<el-button type="success" size="mini" @click="reduce">减</el-button>
</div>
</template>
<script>
// 模板获取Mutations方法
// 在模板count.vue里用import 引入我们的mapMutations：
import {
mapState,mapMutations } from 'vuex';
export default{
data(){
return{
}
},
computed:{
...mapState(['count'])
},
methods:{
...mapMutations( [ 'add','reduce' ] )
}
}
</script>
<style>
</style>
4.actions
<template>
<div>
<p>
<el-button type="success" @click="addAction">+</el-button>
<span>{
{
count}}</span>
<el-button type="primary" @click="reduceAction">-</el-button>
</p>
</div>
</template>
<script>
import {
mapState,mapMutations,mapGetters,mapActions } from 'vuex';
export default{
data(){
return {
}
},
computed:{
...mapState(['count'])
},
methods:{
...mapActions(['addAction','reduceAction'])
}
}
</script>
<style>
</style>