Vuex 超详细入门及使用讲解!!! 觉得可以请点赞关注收藏!

vuex 基础详解

vuex 的基本属性 (5个)

State

State 是存放数据的地方,类似于vuex的数据仓库。特性为muatation修改了stater数据的时候,他会动态修改所有调用这个变量组件的值 ( 若是store 中的数据发生改变,依赖这个数据的组件也会发生更新 )

Getter

Getter 用来获取(State)数据

Mutation

Mutation 提交更新数据的方法,必须是同步的! 如果需要使用异步请使用Actoin

mutation 都有一个字符串事件类型(type)和一个回调函数(handler);
回调函数就是我们实际状态更改的地方

Action

Action的大致功能与mutation基本一致;
区别:
	1.Action 提交的是mutation,而不是直接更改状态;
	2.Acton 可以包含异步操作,而mutation不可以

Module

Module 模块化vuex,让每一个模块都拥有上述属性

安装 vuex

NPM 安装

npm install vuex --save

YARN 安装

yarn add  vuex

创建项目时安装

创建使用

• 1.在src文件夹下新建文件夹(store)名字任意,在store,并创建 index.js文件
• 2.在index.js中注入引入依赖

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

• 3.在根入口文件main.js下引入,并挂载store文件夹下的index.js文件

import Vuex from 'vuex';
Vue.use(Vuex)

new Vue({
  el: '#app',
  store,//把store引入到Vue实例中
  router,
  components: { App },
  render: (createElement) => {
        return createElement(App);
    }

})

• 4.回到store/index.js文件,创建State常量储存公共状态:

创建 state 存放公共状态
const state = {
	count: 0
}
默认导出
export default new Vuex.Store({
    state
    添加属性是需要添加的
})

• 5.创建mutations常量,用来修改state常量中的属性对象,在属性中定义方法进行修改

const mutations = {
    方法名
    add (state) {
        state.count ++
    },
    方法名
    reduce (state) {
      	state.count --  
    }
}
在默认导出里引入 mutations
默认导出
export default new Vuex.Store({
    state,
    mutation
})

• 6.在入口文件main.js中引入 vuex的store的实例

import store from './sotre';

new Vue({
  el: '#app',
  store,//把store引入到Vue实例中
  router,
  components: { App },
  render: (createElement) => {
        return createElement(App);
    }

})

组件中使用

插值模板使用
<template>
	<div>
         <h1>{{$store.state.count}}</h1>
        <button @click="$store.commit('add')">加</button>
        <button @click="$store.commit('reduce')">减</button>
    </div>
</template>
<script>
  
</script>

计算属性方法使用
<template>
	<div>
        <h1>{{count}}</h1>
        <button @click="$store.commit('add')">加</button>
        <button @click="$store.commit('reduce')">减</button>
    </div>
</template>
<script>
 export default {
     computed:{
         count () {
             return this.$store.state.count;
         }
     }
 }
</script>

引入文件属性计算属性方法使用
<template>
	<div>
        <h1>{{count}}</h1>
        <button @click="$store.commit('add')">加</button>
        <button @click="$store.commit('reduce')">减</button>
    </div>
</template>
<script>
import {mapState} from 'vuex';
 export default {
     computed:{
        ...mapState({
        	count:state => state.count
        })
     }
 }
</script>

引入文件属性计算属性方法使用
展开
<template>
	<div>
        <h1>{{count}}</h1>
        <button @click="$store.commit('add')">加</button>
        <button @click="$store.commit('reduce')">减</button>
    </div>
</template>
<script>
import {mapState} from 'vuex';
 export default {
     computed:{
        ...mapState(['count'])
     }
 }
</script>

上述引入的mapState 是固定的,意思为映射index.js中的state属性值,无过多含义