Vuex详细教程（1）
2018-07-27 本文已影响0人
苦咖啡Li
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
}
}
