vuex基础

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基本配置完成并实现 按钮点击切换值