vuex入门

1.入门使用

(1)引入vuex

$npm install vuex --save

(2)新建src/vuex文件夹,在vuex中新建store.js文件。文件中引入vue和vuex。

import Vue from 'vue';
import Vuex from 'vuex';
//通过Vue.use()进行引用
Vue.use(Vuex);

(2)初步使用
store.js添加一个常量对象,

const state = {
    count:1,
}

export出去,让外部可以引用

export default new Vuex.Store({
    state
})

新建src/components/count.vue,模板中引入store.js,并用{{$store.state.count}}输出store.js中count的值。




以上,在App.vue中到count.vue页面中,成功显示了store.js的count值。
在store.js中增加两个方法改变state中count的值。

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

在export出的增加mutations

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

在count.vue模板中增加两个button,调用store中mutations的方法控制count值的加减。

以上实现了vuex的初次使用,对count值的改变。

2.state

store.js中state值赋值给模板中的展示值。

(1)通过computed的计算属性直接赋值
computed:{
        count(){
            return this.$store.state.count;
        }
    }

修改count.vue中count展示方式

{{$store.state.count}}---{{count}}

(2)通过mapState的对象赋值

引入mapState

import {mapState} from 'vuex';

在computed计算属性里为count赋值

computed:mapState({
        count:state => state.count
    })

(3)通过mapState的数组赋值
同样要引入mapState,然后在computed中做设置

computed:mapState(["count"])

3.Mutations

(1)修改状态

修改mutations中add方法,添加一个参数n。

const mutations={
    add(state,n){
        state.count += n;
    },
    reduce(state){
        state.count--;
    }
}

修改count.vue中$store.commit的传参。

浏览器中count每次增加10。

(2)修改$store.commit()[email protected]=""的形式

在count.vue中import入mapMutations

import {mapState, mapMutations} from 'vuex';

在count.vue中的methods属性中加入mapMutations

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

[email protected]=""

4.getters

数据获取之前对数据进行过滤和加工。

(1)getters基本用法

在store.js中用const声明getters属性

const getters = {
    count:function(state){
        return state.count += 100;
    }
}

并export出

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

count.vue中配置computed属性

computed:{
        ...mapState(["count"]),
        count(){
            return this.$store.getters.count;
        }
    },
(2)用mapGetters简化

count.vue中import引入mapGetters

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

修改computed属性,mapGetters

    computed:{
        ...mapState(["count"]),
        ...mapGetters(["count"])
    },

5.actions

在actions中提交mutation,将mutations里面处理数据的方法编程可异步处理数据的方法(通过mutation来操作)。
在store.js中声明actions

const actions = {
    addAction(context){//context:上下文,可以理解成store.js本身
        context.commit('add',10)
    },
    reduceAction({commit}){//一般简写成直接把commit对象传递过来
        commit('reduce')
    }
}

同样要export导出

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

在count.vue模板中使用

methods: {
      ...mapMutations([
        'add', 'reduce'
      ]),
      ...mapActions(['addAction','reduceAction'])
    },
//增加了一组增减button
    

以上在浏览器中可以增减count的值
增加异步效果

const actions = {
    addAction(context){
        context.commit('add',10);
        setTimeout(()=>{context.commit('reduce')},3000);
        console.log('我比reduce提前执行');
    },
    reduceAction({commit}){
        commit('reduce')
    }
}

在浏览器中可以看到,点击增加button之后,count增加,之后控制台先打印出'我比reduce提前执行',然后才会减少1。

6.module

状态管理器的模块组。
如果项目比较复杂,那state是一个很大的对象,store对象也将会变得非常大,难于管理。
module可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
在store.js中声明模块组

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

修改export出的Vuex.Store里的值

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

在count.vue中使用

{{$store.state.a.count}}

同样可以简化方法,在computed中设置

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

{{count}}

store.js中有多个模块组的结构

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
})

你可能感兴趣的