Vue和Vuex传值和创建脚手架(一)

组件传值

 

组件建共享数据（Vuex）

1、state

（1）、放置所有的公共状态的属性

 （2）、定义

const store=new Vuex.Store({
  state:{
    count:0
  },

})

（3）、使用

原始形式：

主键可以使用 this.$store获取Vuex中的store对象实例 

{{$store.state.count}}

2、mutations

每个mutations方法都有对应参数

（1）、state指的是当前Vuex中对应的state

（2）、payload 载荷 提交mutations方法是传递的参数，它可以是任何形式

const store=new Vuex.Store({
  state: {
    count:10,
  },
  mutations:{

    // addCount(state){
    //   state.count+=1 ;
    // },
    addCount(state,payload){
      state.count+=payload ;
    },

  },

})

methods:{
        // commit 参数一：方法名  参数2：参数
    //    test(){
    //        this.$store.commit('addCount')
    //    },
       test(){
           this.$store.commit('addCount', 10)
       },
    },

3、actions

const store=new Vuex.Store({
  state: {
    count:10,
  },
  mutations:{

    // addCount(state){
    //   state.count+=1 ;
    // },
    addCount(state,payload){
      state.count+=payload ;
    },

  },
  actions:{
    //一个参数 context相当于this.$store
    //第二个参数为传的参数
    get(context,params){
      context.commit('addCount',params)
    }

  },

})

 test1(){
           this.$store.dispatch('get', payload)
       }

4、getters

5、modules

const store=new Vuex.Store({
  state: {
    count:10,
  },
  mutations:{

    // addCount(state){
    //   state.count+=1 ;
    // },
    addCount(state,payload){
      state.count+=payload ;
    },

  },
  actions:{
    //一个参数 context相当于this.$store
    //第二个参数为传的参数
    get(context,params){
      context.commit('addCount',params)
    }

  },
  getters:{


  },
  modules:{
    //用户模块
    user:{
      state:{
        token:"123"
       }
      ,
    }
  }

})

 取值：this.$store.state.user.token

注：

1、修改state状态必须通过mutations

2、mutations只能执行同步代码，例如Ajax、定时器不能在mutations中执行

3、执行异步代码需要通过actions，然后将数据提交给mutations才能完成

4、state状态及共享数据可以在组件中使用

5、组件中可以调用actions

搭建环境

一、建立脚手架

vue create  demo

报错1：

报错原因：

没有安装脚手架vue-cli

解决方法：安装脚手架vue-cli

npm install -g vuex@3

报错2：

解决办法

1.开始处搜索powershell，以管理员的身份运行

 2.然后输入下面的指令：set-ExecutionPolicy RemoteSigned

 二、引入Vuex

安装运行时依赖

npm i vuex --save

在main.js中引入

import Vuex from 'vuex'

Vue.use(Vuex)  //注册Vuex的功能  Vue.use的方法实际是调用 Vuex 中的install

const store=new Vuex.Store({})


new Vue({
  render: h => h(App),
  store,
}).$mount('#app')