vue-cli教程(四) 组件状态共享（vuex）

2019独角兽企业重金招聘Python工程师标准>>>

vuex文档：https://vuex.vuejs.org/zh-cn/

vuex安装：cnpm install vuex --save

简单使用：

    1.新建 store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations: {
        change_count (state) {
            // 变更状态
            state.count++
        }
    },
})

export default store

1.获取属性（写在computed里）

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

或

import {mapState} from  'vuex'

computed:mapState([
    'count'   //参数和state里面的参数一样
])

或

import {mapState} from  'vuex'

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

状态改变（Mutations）：只做状态变更

change_count(){
    this.$store.commit("change_count")
},

或

import { mapMutations } from 'vuex'

...mapMutations({
    change_count:"change_count"  //本地触发的方法：映射的方法
})

或：

import { mapMutations } from 'vuex'

...mapMutations([
    'change_count'
])

action方法：可以写逻辑代码，异步代码

在store/index.js

actions:{
    change_count({commit,state},context){
    //异步的耗时操作
    setTimeout( 
        function () {
             alert(state.count)
             commit("change_count") 
        },100)}
}

调用

change_count(){
       this.$store.dispatch('change_count');
},

转载于:https://my.oschina.net/u/2528821/blog/1546183