Vuex详细教程

1、使用Vue脚手架构建好项目后

1.1 安装Vuex

//  生产环境中需要使用
npm install Vuex --save   

1.2 新建一个 store 文件夹，并在文件夹下新建 store.js ，文件中引入 Vue 和 Vuex

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

1.3 使用 vuex，通过 vue.use 进行引用

Vue.use( Vuex )

#####1.4 在 main.js 中引入新建的 Vuex 文件

import  storeConfig from './vuex/store'

1.5 在实例化 Vue 对象时加入 store 对象

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

2、 Demo 中使用 Vuex

2.1 简单 state 的使用

2.1.1 在store.js文件中增加一个常量对象

const state= {
    count : 1
}

用 export default封装代码抛出，让外部可以引用

export default new Vuex.store({
    state
})

2.1.2 新建一个 Vue 模板（组件），在组件中我们引入 store.js 文件，并在模板中使用  {{ $store.state.count }} 输出 count 的值

<template>
    <div>
        <p>{{ $store.state.count }}</p>
    </div>
</template>
<script>
    import store from '@/vuex/store'
    export default {
        data(){
            return { msg : "store的使用" }
        }
    }
</script>

3 store.js 中其他方法的使用

3.1 在 store.js 文件中加入两个改变 state 的方法

const mutation = {
    add( state ){
        state.count += 1;
    },
    reduce( state ){
        state.count -= 1;
    }
}

//  在 count.vue组件中加入两个按钮，并调用 mutations 中的方法
<template>
    <div>
        <button @click="$store.commit('add')"> 增加 </button>
        <button @click="$store.commit('reduce')"> 减少 </button>
    </div>
</template>

3.2 state 访问状态对象

const state  , 访问状态对象，即 SPA (单页面应用程序)中的共享值

store.js 中的值，赋值给模板中的data的三种方式：

3.2.1 通过 computed 的计算属性直接赋值

//  computed属性可以在输出前，对data中的值进行改变
computed:{
    count(){
        return this.$store.state.count;
    }
}

3.2.2 通过 mapState 的对象来赋值

// 用 import 引入 mapState
import { mapState } from './vuex'

//  在  computed  计算属性里面修改值
computed：mapState( {
    //  理解为传入  state  对象，修改 state.count 属性
    count : state => state.count
} )

3.2.3 通过 mapState 的数组来赋值

computed：mapState(['count'])

3.3 mutations 修改状态 （  $store.commit() 同步修改 state 状态 ）

//   vuex  提供了 commit 方法来修改状态
<button @click="$store.commit('add' , 10)"> + </button>
<button @click="$store.commit('reduce')"> - </button>

store.js

// 修改状态时传值，通过所传的值进行相应的操作，只需要再  mutations 里面再加一个参数，并再  commit  时传递进来就可以了
 const mutations={
        add( state , n ){
            state.count += n;
        },
        reduce( state ){
            state.count -= 1;
        }
    }

模板获取 Mutations 方法

实际开发中不想看到 $store.commit( ) 方法出现，步骤：

(1) 在模板 count.vue 中，用 import 引入 mapMutations

import { mapState, mapMutations }  from  'vuex';

(2) 在模板的js中添加 methods 属性，并加入 mapMutations

methods : mapMutations([ 'add', 'reduce' ])

(3) 通过上述操作，可以再模板中直接使用 Mutatios 中的方法

<button @click="add"> + </button>

3.4 getters 计算过滤操作

3.4.1 getters 基本用法

若要对 store.js 文件中的count 进行一个计算属性的操作，(在他输出前，给它加100)

//  首先要在 store.js 中用 const  申明  getters  属性 
const getters = {
    count : function( state ){
        return state.count += 100
    }
}

写好 getters 后，需要在 Vuex.Store() 里面引入，由于之前已经引入 state 和 mutations ,所以这里引入需要引入三个属性 state、 mutations 、 getters

export default new Vuex.Store({
    state, mutations, getters
})

在 store.js 中的配置完成后，需要到模板也对 computed 进行配置

computed:{
    ...mapState(['count']),
    count(){
        return this.$store.getters.count;
    }
}

采用mapGetters 简化模板写法

//  用 import 引入mapGetters
import { mapState, mapMutations, mapGetters } from 'vues';

//  在 computed 属性中加入 mapGetters
computed: {
    ...mapState(['count']),
    ...mapGetters(['count'])
}

3.6 actions 异步修改状态（可异步修改state的状态）

3.6.1 在 store.js 中申明 actions

actions是可以调用Mutations中的方法的

const actions = {
    addCount( context ){
        context.commit( 'add', 10 )
    },
    reduceCount( {commit} ){
        commit( 'reduce', 10 )
    }
}

注意 ：在 actions 中我们都用 commit 调用了 Mutations 里面的方法

参数：

context： 上下文对象，可理解为 store 本身

{ commit }: 直接把 commit 对象传递过来，可以让方法体逻辑和代码更清晰

3.6.2 在模板中的使用

<template>
    <p>
      <button @click="addAction">+</button>
      <button @click="reduceAction">-</button>
    </p>
</template>

//  改造methods 方法，引入 mapActions  ,再用扩展运算符把   mapMutations  和  mapActions  加入

import { mapState, mapMutations, mapGetters, mapActions }  from  'vuex'

methods:{
    ...mapMutations([ 'add', 'rediuce' ]),
    ...mapActions([ 'addCount', 'reduceCount' ])
}

3.7 module 模块组

3.7.1 声明模块组

//  在 vuex/store.js 中声明模块组，需要用 const 常量的方法声明模块组
const moduleA = {
    state,mutations,getters,actions
}

//  声明好后，需要修改原来 Vuex.Store 中的值
export default new Vuex.Store({
    modules: { a: moduleA }
})

3.7.2 在模板中使用

//  模板中使用采用插值的形式填入
<h3>{{ $store.state.a.count }}</h3>

//  若想采用简单的方法引入，秩序在计算属性中  return  我们的状态
computed: {
    count(){
######         return this.$store.state.a.count
    }
}