vuex的安装使用

1.安装  vuex

npm install vuex --save

2.vuex理解

官方解释：vuex是一个专为vue.js应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

可以理解为是一个 ：全局变量。

3. 使用vuex

（1）在src 下创建文件夹store；创建store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
export default new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
     increment (state) {
      state.count=state.count+5;
    },
    decrement(state) {
      state.count=state.count-2;
    },
  }
})

（2）在 main.js 中导入

import store from './store/store'
//实例化 store
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})

（3）在demo.vue 文件中使用

<template>
    
       <div class="demo">
               {{ count }}
               <p>
                <button @click="increment">+</button>
                <button @click="decrement">-</button>
              </p>
               
       </div>
  
</template>
<script type="text/javascript">
    export default{
        name:'demo',
        data(){
            return{

            }
        },
        methods:{
            increment(){
              this.$store.commit('increment')
            },
            decrement(){
              this.$store.commit('decrement')
            }
        },
        computed:{
            count(){
                return this.$store.state.count
            },
        }


    }

</script>

具体可参考：https://vuex.vuejs.org/zh/