标签：count vue cli 私有 组件 state Test Vuex store

Vuex 概念

Vuex 用于解决组件与组件之间共享的状态，集中存储管理所有组件状态
创建一个Test.vue实现一个简单的计数器功能

<template>
  <div class="test">
    私有 : {{count}}<br>
    <button @click="addCount">私有+</button>
  </div>
</template>

<script>
import store from "@/store";

export default {
  name: "Test",
  data(){
    return{
      count : 0
    }
  },
  methods:{
    addCount(){
      this.count++
    }
  }
}
</script>
//这是基础课程中的计数器，它只能作用于这个组件，跳到其它组件即失效

store 模式

如果应用特别简单，可以使用store模式，可以支持共享极少的数据
创建一个store/index.js

const store={
    state :{
        count:0
    },
    increment(){
        this.state.count++
    }
}

export default store

在Test.vue中添加

<template>
  <div class="test">
    私有 : {{count}} , 共享 : {{storeState.count}}<br>
    <button @click="addCount">私有+</button>
    <button @click="increment">共享+</button>
  </div>
</template>

<script>
import store from "@/store";

export default {
  name: "Test",
  data(){
    return{
      count : 0,
      storeState:store.state
    }
  },
  methods:{
    addCount(){
      this.count++
    },
    increment() {
      store.increment()
    }
  }
}
</script>

其它页面可以通过 storeState:store.state 获取改页面自加后的数据。

标签：count,vue,cli,私有,组件,state,Test,Vuex,store
来源： https://www.cnblogs.com/keacua/p/15324359.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。