vue全家桶+Koa2开发笔记(1)--vuex

1.  安装webpack的问题： webpack坑系列--安装webpack-cli

2.  vue-cli（vue脚手架）超详细教程

3.  在命令行中使用 touch 执行新建文件；

4.  关于Vue.use()详解  

5. vuex 最简单的介绍

  目录如左侧所示，主要是标红的三个文件。

5.1 store文件，编写vuex的各个功能，包括：

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { // 定义状态数据
  count: 2 } const mutations = { // 定义方法，操做数据
 increment (state) { state.count++ }, decrement (state) { state.count-- } } const actions = { add: ({commit}) => { // 触发上述的方法,对外提供的方法接口,能够在这里提供异步操做
    commit('increment') }, reduce: ({commit}) => { commit('decrement') } } export default new Vuex.Store({state, mutations, actions})

5.2 而后在main文件中，引入store 注意这里是小写的store

import Vue from 'vue' import App from './App' import router from './router' import store from './store' Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })

5.3 最后在vue文件中调用：

<template>
    <div>
        <h1>{{ $store.state.count }}</h1>
        <button type="button" @click="add">增长</button>
        <button type="button" @click="reduce">删减</button>
    </div>
</template>
<script> import { mapActions } from 'vuex' export default { methods: mapActions([ 'add', 'reduce' ]) } </script>

注意：在5.2中挂在元素时，加入的store，才能在接下来的文件中，引用到 $store

 

6.  mapState 的使用方法   （文章标题：   state,mapState,...mapState对象展开符详解 ）

注意的是： 用data接收的 $store 不能及时响应更新,用computed就能够.

 

7. 多个组件使用不一样的vuex：

主要涉及上面三个地方，其中

一、  main.js 主要用来引入注册 store，

二、 store文件夹下定义不一样页面或组件对应的 vuex数据，而且有index来进行统一的对外输入，

三、 componments文件夹喜好定义的a和b等组件是html范畴，调用vuex

具体以下所示：

（1）main文件引入 store的index文件以下所示：

import Vue from 'vue' import App from './App' import router from './router' import store from './store/index.js'//注意这里引入的是store文件夹下的index文件
Vue.config.productionTip = false

new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })

    (2) index文件 引入a和b文件

import Vue from 'vue'; import Vuex from 'vuex'; import moneys from './modules/a' import counts from './modules/b' Vue.use(Vuex)//安装注册vuex
 export default new Vuex.Store({//实例话vuex，并引入两个vuex定义的函数
 modules:{ moneys, counts } })

 

（3）store文件夹下的a.js

const state = {//定义state
  money: 10
}

const mutations = {//定义操做数据方法
  add(state,parmas) {//接受传参的方法
    state.money+=parmas;
  },
  reduce(state) {
    state.money--
  }
}

const actions = {//定义外部接口，包括异步处理
  add: ({commit},parmas) => {//注意这里的传参方式
    commit('add',parmas)
  },
  reduce: ({commit}) => {
    commit('reduce')
  }
}

export default {//抛出定义的函数和开启命名空间
    namespaced:true,   //用于在全局引用此文里的方法时标识这一个的文件名

state, mutations, actions }

对应的b与其相似。对外的index文件以下：

import Vue from 'vue'; import Vuex from 'vuex'; import moneys from './modules/a' import counts from './modules/b' Vue.use(Vuex)//安装注册vuex
 export default new Vuex.Store({//实例话vuex，并引入两个vuex定义的函数
 modules:{ moneys, counts } })

（4）对应的vue调用vuex

<template>
<div class="box">
    <div>{{$store.state.moneys.money}}</div><!-- 注意这里调用到的state值，须要带上命名空间moneys-->
    <button @click="add(2)">增长</button>
    <button @click="reduce">减小</button>
</div>
    
</template>
<script>
import {mapActions} from 'vuex'
export default {
    methods: mapActions('moneys',['add','reduce'])//注意这里的命名空间 moneys
　　//  传递多个参数的时候 写成一个对象

}
</script>this.$store.dispatch('delTask', {task, index});

如下两个方式同样：

changeTab(index){ this.$store.dispatch('leftNav/changeTab',index) //left是命名空间，index是传递的参数 }, //...mapActions('leftNav',['changeTab'])

分发事件和常规事件混合方法：

methods: { ...mapActions('a',['changeData']), //注意这里要写上...符号
        triger:()=>{ alert(1); } }

附：   超简单入门Vuex小示例