vueX传值的操作流程

下载脚手架：

1.npm i -g @vue/cli 下载脚手架

验证是否安装成功
         

2.vue --version

创建项目

1.vue create 项目名称

       2.出现三个选择(下键是选择，空格是选中)
         选最后一个自定义选项
         Manually select features(自己配置需要的)
      3.就会出现选择的
          1.Choose Vue version
          2.Babel
          3.Router 
          4.Vuex
          5.CSS Pre-processors
          6.Linter/Formatter
         以上是必选的
      4.出现两个就选 第1个  2.x
      5.yes  之后是选择less
      6.ESLint开头的有四个 选第一个 中间含with的
      7.Lint on save 选第一个 意思为边写边保存
        Lint and fix on commit 
  8.In dedicated config files 
  In package.json 选第二个  意思为保存在package.josn里面
  9.就一直yes回车就ok

打开之后在已经创建好的store文件夹中打开index.js里面我们的尤大大已经为我们写好了只需要把你自己要写的添加进去即可

 strict:true,
  state: {
    count:24
  },
  mutations: {
    setCount(state,args){
      return state.count+=args
    }
  },
  actions: {
    actionCount({commit},args){
        commit('setCount',args)
    }
  },
  getters:{
    getCount(state){
     return state.count
    }
  },

这里写好以后我们再打开components文件夹里面的HelloWorld.vue文件把不用的东西先删除一下然后再打开views文件夹里的Home.vue文件同理把不用的东西先删除掉然后进行书写代码

我们这里要用到父传子首先打开Home.vue文件然后如下

引入mapGitters记住是在script里面引入

import {mapGetters} from 'vuex'

然后通过computed计算属性来拿到它传递过来的数据方法之类的

 computed:{
      ...mapGetters(['getCount']),
  },

然后再 template组件里面添加一个div，然后内容就输出到页面了

<div>{{getCount}}</div>

 还可以在子组件里加上一个事件触发它，

打开components文件夹里面的HelloWorld.vue文件

在这里我们要使用方法所有我们要在script里面引入然后添加到methods里面书写

 ...mapActions(['actionCount']),

点击事件可以是当前传递过来的方法，在template组件里面添加一个button

<button @click="actionCount(2)">点我改变</button>

然后进入页面就好了，这就是简单的组件传值