11-vuex概念、数据分块、四种使用方案、辅助工具

一、Vuex

1、概念

Vuex是Vue的状态管理工具，也是多组件状态共享的工具

• Vuex相当于Vue的一个集中式的存储仓库
• 它存储的是数据（状态）
• 存储仓库：本地仓库 cookie 数据库
• 集中式数据管理，一处修改，多处使用
• 适合中大型应用

---

2、为什么使用Vuex

• 实现流程化，让项目的运行更加优化

---

3、状态和状态管理模式

• 用一条数据去管理一个视图，那这个数据就称为“状态”
• 用一条数据管理一个视图的模式，称之为“状态管理”

---

4、四种Vuex开发流程方案

• 标准——>标准
• 非标准——>标准
• 标准——>非标准
• 非标准——>非标准

---

5、Vuex核心组成

• actions
  表示动作的创建者，作用是创建动作、发送动作，用于用户交互
• mutations
  表示动作的触发者，作用是修改数据、更新视图
• state
  表示状态的存储者，作用是定义状态

注：
后端的数据交互写在actions里
Vuex调试工具主要调试mutations
Vuex是流程化执行的，符合单向数据流思想
当不确定是否要使用vuex时，就选择不用

---

6、基础操作步骤

• 安装vuex
  $ cnpm i vuex -S或 $ yarn add vuex

• 在src目录下新建 store目录，在其中创建index.js

//目录是src/store/index.js
import Vuex from 'vuex';
import Vue from 'vue';
Vue.use(Vuex);

//定义store模块
const store=new Vuex.Store({
    state：{
        count:0
    },
    actions:{
        //actions是一个对象
        //存储的都是创建、发送动作方法
        // fn(store对象，组件传来的实参1，实参2，···){}
	      increment ( { commit }, val ) {
	      // 动作创建
	      const action = {
	        type: INCREMENT,
	        val
	      }
      	  commit(action)
     },
    mutations：{
        //mutations是一个对象
        //存储的是方法
        //方法名是actions发送来的动作类型
        //mutations用来修改数据
        //payload表示从组件传递来的参数，又称为负载
         [ INCREMENT ] ( state,action ) {
	      //修改数据
	      state.count ++
	    }
    },
    getters:{} //表示帮助视图，获得store中的state
    modules // 用来实现数据分块，方便管理
})

//导出store模块
exports default store

• 在main.js中注入store

import store from './store'
new Vue({
	router, //注入router后，子组件都会拥有$route和$router属性
	store, //注入store后，子组件都会拥有$store属性，用来和vuex通信
	render:h=>h(App),
}).$mount('#app')

• 在组件内使用

<template>
  <div>
    <button @click = "add"> + </button>
    <p> {{ $store.state.count }} </p>
  </div>
</template>

<script>
export default {
  methods: {
    add () {
      // 执行actions中的increment方法
      // this.$store.dispatch( actions中方法的名称 )
      this.$store.dispatch('increment',100)
    }
  },
  	created () {
    	console.log( this.$store )
 	}
}
</script>

---

7、vuex 之 数据分块 操作步骤

• 安装vuex
  $ yarn add vuex
• 在src下新建store目录，并在其中新建index.js

import Vuex from 'vuex'
import Vue from 'vue'
import * as todos from '../pages/vuex_basic/store'

Vue.use( Vuex )

const store = new Vuex.Store({
  modules: {
    //每一个分块出去的数据包
    vue_basic: {
      state: todos.state,
      actions: todos.actions,
      mutations: todos.mutations,
      getters: todos.getters
    }
  }
})
export default store 

• 在main.js中注入

import store from './store'
new Vue({
  	 store, // 在项目中注入store,让所有的子组件拥有一个属性  			   $store ， 用于和vuex进行通信
 	 render: h => h(App),
}).$mount('#app')

• 在vue_basic/store.js中打造state、actions、mutations、getters

import axios from 'axios'
const ADD_TODOS = 'addTodos'
const GET_CATEGORY = 'getCategory'

export const state = {
  todos: [
    {
      id: 1,
      task: '任务一'
    }
  ],
  category: null
}

export const actions = {
  addTodos ({ commit }, val ) {
    const action = {
      type: ADD_TODOS,
      val
    }
    commit( action )
  },
  getCategory ( {commit} ) {
    axios({
      url: '/index.php',
      params: {
        r: 'class/category',
        type: 1
      }
    }).then( res => { 
      // 动作创建
      const action = {
        type: GET_CATEGORY,
        payload: res.data.data.data
      }
      commit( action )
    }).catch( error => console.log( error ))
  }
}

export const mutations = {
  [ ADD_TODOS ] ( state,action ) {
    state.todos.push({
      id: state.todos.length + 1,
      task: action.val
    })
  },
  [ GET_CATEGORY ] ( state,action ) {
    state.category = action.payload
  }
}

export const getters = {
  getTodos ( state ) {
    return state.todos 
  } 
}

• 在vue_basic/index.vue中使用

<template>
  <div>
    <h3>todolist增加功能 </h3>
    <input type="text" v-model = "val" @keyup.enter="add">
    <ul>
      <li v-for = "item in todos" :key = "item.id">
        {{ item.task }}
      </li>
    </ul>

    <button @click = "getCategory"> 点击获取数据 </button>

    <ul>
      <li v-for ='item in category' :key = "item.cid">
        {{ item.name }}
      </li>
    </ul>

  </div>
</template>

<script>
import { mapState,mapActions } from 'vuex'
export default {
  data () {
    return {
      val: ''
    }
  },
  methods: {
    ...mapActions(['addTodos','getCategory']), // 容易忘记
    add () {
      this.addTodos( this.val )
      this.val = ''
    }
  },
  computed: {
    ...mapState({
      todos: state => state.vue_basic.todos, // 这里是一个箭头函数来取数据
      category: state => state.vue_basic.category
    })
  }
}
</script>

vue项目中store下的一个目录就是一个数据包
vue是通过一个叫做module的模块来管理的

---

四种方案
前标准——后标准
前标准——后非标准
前非标准——后非标准
前非标准——后标准
component —dispatch—> actions —commit—>mutations—state <----getters----component

8、辅助工具

• mapActions
• mapMutations
• mapGetters
• mapState