VUEX--入门demo利用vuecli创建一个count计数

深碍√TFBOYSˉ_ 2023-06-23 08:53 4阅读 0赞

## 背景 ##

1.  利用Hbuilder创建一个vue-cli的项目
2.  运行npm install --save vuex

## 项目目录![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70] ##

## 对应文件内容 ##

App.vue

<template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <vuexDemo />
      </div>
    </template>
    
    <script>
    import vuexDemo from './vuexDemo.vue'
    
    export default {
      name: 'app',
      components: {
        vuexDemo
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

main.js

import Vue from 'vue'
    import App from './App.vue'
    import store from './store.js'
    
    Vue.config.productionTip = false
    
    new Vue({
      store, //注册store到vue实例中 可以通过this.$store方式调用
      render: h => h(App),
    }).$mount('#app')

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++;
            }
        },
        actions:{
            increment(state){
                state.count++;
            }
        }
    })

vuexDemo

<template>
      <div id="app">
          当前状态：{
       { count }}
        <button @click="increment">count++</button>
      </div>
    </template>
     
    <script>
    export default {
      methods:{
          increment:function(){
            this.$store.commit('increment');
          }
      },
      computed: {
        count () {
          return this.$store.state.count
        }
      }
    }
    </script>

## 运行 ##

方式1：npm run serve  
方式2：点击右上的预览按钮

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191218111532840.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ==,size_16,color_FFFFFF,t_70