vuex的基本使用

Vuex的基本使用

1. 安装vuex

   我使用的是npm 安装

   npm install vuex --save
   

2. 安装完之需要再main中导入

   import Vuex from 'vuex'
   
   Vue.use(Vuex)
   

3. 导入完成之后还是在main中创建一个store对象

   const store = new Vuex.Store({
       state: {
           count: 0,
           message: "你好啊，vuex！"
       },
       mutations: {
           addition(state) {
               state.count++
                   state.message = "刚刚进行的是加法！"
           },
           subtraction(state) {
               state.count--
                   state.message = "刚刚进行的是减法"
           }
       }
   })
   

4. 然后再App.vue中使用

   <template>
     <div class="hello">
       <div>
         {{$store.state.count}}
       </div>
       <button @click="addition()">加</button>
       <button @click="subtraction()">减</button>
       <div>
         {{$store.state.message}}
       </div>
     </div>
   </template>
   
   <script>
   export default {
     name: 'App',
     data(){
       return{
         
       }
     },
     methods:{
       addition(){
         this.$store.commit('addition')
       },
       subtraction(){
         this.$store.commit('subtraction')
       }
     },
     mounted(){
         console.log(this.$store.state.count)
     }
   }
   </script>
   
   <style>
   </style>
   
   

效果图：