Vuex的学习

定义

vuex的配置

安装

npm install vuex --save

新建store.js，导入

import Vuex from 'vuex'
Vue.use(Vuex)

store.js中创建store对象

export default new Vuex.Store({
  state:{//共享数据},
  mutations:{//数据操作方法},
  actions:{//异步任务},
  getters:{//包装state数据的方法},
  modules:{}
})

挂载store对象

Vuex的核心概念

State

在store中定义

state:{//共享数据
    count:0
  }

在组件中访问
全局访问

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

按需导入访问
映射store中的state为当前组件的computed计算属性

<h3>{{ count }}</h3>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["count"])//映射store中的state为computed
  }
};
</script>

Mutation

提供变更存储在Store中数据的方法

在store中定义

mutations:{//数据操作方法
    add(state){//默认参数为state
      state.count++
    },
    addN(state,step){//带参数的
      state.count+=step
    }
}

在组件中访问
全局访问

<button @click="addcount">+1</button>
<button @click="addcountN">+3</button>
methods:{
          addcount(){//调用store的mutations中的add方法
            this.$store.commit("add")
          },
          addcountN(){
            this.$store.commit("addN",3)
          }
}

按需导入访问
映射store中的Mutation为当前组件的method方法

<button @click="add">-1</button>
<button @click="addN">-3</button>
import { mapState,mapMutations} from 'vuex'
methods:{
        ...mapMutations(['add','addN']),//映射store中的Mutation为method
}

Action