vuex基础

vuex基础

vuex是vue对对象状态信息的统一管理，是状态的‘仓库’，用于对对象属性的统一修改，这些属性具有共用性，在某一处修改后就需要在全部的页面中改变，比如用户的登录状态等等

安装vuex

npm  install vuex --save

在src目录下新建store.js文件
在文件中引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  }
})

在使用Vue CLI生成的项目时会让你选择store，选择了后会在页面给你生成一个store.js

state状态

将需要用到的共用数据写入state中

export default new Vuex.Store({
  state: {
	count: 1
  }
}

新建一个vue模板
<script>
import store from '@/vuex/store' //引入store.js
export default {
    data(){
        return{
            msg:'Hello vuex'
        }
    },
    store//把store放入组件中
 }

在组件中引用公共数据state
<template>
    <div>
        <h2>{{msg}}</h2><hr>
        <h3>{{$store.state.count}}</h3>
    </div>
</template>

使用mapState

我们不想要{{$store.state.count}}这种形式的数据，而是直接写成{{count}}
第一种方式
新建一个vue模板
<script>
import store from '@/vuex/store' //引入store.js
export default {
    data(){
        return{
            msg:'Hello vuex'
        }
    },
    computed:{
    	count(){
    		return this.$store.state.count;
    	}
    },
    store//把store放入组件中
 }
</script>

第二种形式
同样是在vue中，
<script>
import store from '@/vuex/store' //引入store.js
import {mapState} from 'vuex'   //引入mapState
export default {
    data(){
        return{
            msg:'Hello vuex'
        }
    },
    computed:mapState({
    		count:state=>state.count
    	}),
    store//把store放入组件中
 }
</script>

第三种形式
在vue中
<script>
import store from '@/vuex/store' //引入store.js
import {mapState} from 'vuex'   //引入mapState
export default {
    data(){
        return{
            msg:'Hello vuex'
        }
    },
    computed:mapState(['count']),
    store//把store放入组件中
 }
</script>

在模板中
<template>
    <div>
        <h2>{{msg}}</h2><hr>
        <h3>{{count}}</h3>
    </div>
</template>

Mutations修改状态

只有Mutations中的方法可以修改state中的数据

在store.js中
export default new Vuex.Store({
  state: {
	count: 1
  },
  mutations:{
  	add(state, n) {
        state.count = state.count + n;
    },
    reduce(state) {
        state.count--;
    }
  }
}

在vue组件中
export default {
    data(){
        return{
            msg:'Hello vuex'
        }
    },
    store
}

在模板中，使用$store.commit()，来传递函数名，以及函数参数，第一个是函数名，后面的是这个函数的参数
<p><button @click="$store.commit('add',10)">ADD</button></p>
<p><button @click="reduce">$store.commit('reduce')</button></p>

mapMutations

我们不想要{{$store.commit()}}这种形式的数据，而是直接写成{{add}}

新建一个vue模板
<script>
import store from '@/vuex/store' //引入store.js
import {mapState,mapMutations} from 'vuex'
export default {
    data(){
        return{
            msg:'Hello vuex'
        }
    },
    computed:mapMutations(['add','reduce']),
    store//把store放入组件中
 }
</script>

在模板中
<p><button @click="add(10)">ADD</button></p>
<p><button @click="reduce">reduce</button></p>

getters计算过滤操作

getters是在数据被调用前，对数据进行处理

在store.js文件中
export default new Vuex.Store({
    state,
    mutations,
    getters: {
        count(state) {
            return state.count += 100;//每次在count被调用之前对数据+100
        }
    }
})

在vue文件中
新建一个vue模板
<script>
import store from '@/vuex/store' //引入store.js
import {mapState,mapMutations,mapGetters} from 'vuex'
export default {
    data(){
        return{
            msg:'Hello vuex'
        }
    },
    computed:{
    	...mapMutations(['add','reduce']),
    	...mapGetters(['count'])
    },
    store//把store放入组件中
 }
</script>

actions异步修改状态

actions可以调用mutations中的方法以及state中的数据

在store.js中
export default new Vuex.Store({
    state,
    mutations,
    getters: {
        count(state) {
            return state.count += 100;
        }
    },
    actions: {
        addAction(context) {
            context.commit('add', 10);
            // setTimeOut(() => { context.commit("reduce"); }, 3000);
            console.log('我比reduce提前执行');
        },
        reduceAction({ commit }) {
            commit('reduce');
        }
    }
})

在vue中
import store from '@/vuex/store'
import {mapState,mapMutations,mapGetters, mapActions} from 'vuex'
export default {
    data(){
        return{
            msg:'Hello vuex'
        }
    },
    // computed:{
    //     count(){
    //         return this.$store.state.count;
    //     }
    // },
    // computed:mapState({
    //     count:state=>state.count
    // }),
    computed:{...mapState(['count']),
    // count(){
    //     return this.$store.getters.count;
    // }
    ...mapGetters(['count'])
    },
    
    methods:{
        ...mapMutations(['add','reduce']),
        ...mapActions(['addAction','reduceAction'])
    },
    store
    
}

在模板中
        <p><button @click="addAction(10)">ADD</button></p>
        <p><button @click="reduceAction">reduce</button></p>

module模块组

模块组就是 把我们对共用数据进行的各种操作进行打包，让我们对数据有了更多的操作空间，可以进行不同的操作

** 声明模块组： **

在vuex/store.js中声明模块组，我们还是用我们的const常量的方法声明模块组。代码如下：

const moduleA={
    state,mutations,getters,actions
}

声明好后，我们需要修改原来 Vuex.Stroe里的值：

export default new Vuex.Store({
    modules:{a:moduleA}
})

** 在模板中使用 ** 现在我们要在模板中使用count状态，要用插值的形式写入。

<h3>{{$store.state.a.count}}</h3>

如果想用简单的方法引入，还是要在我们的计算属性中rutrun我们的状态。写法如下：

computed:{
    count(){
        return this.$store.state.a.count;
    }
},