【Vue】Vue-Vuex的简单用法（一）

系列笔记目录

---

文章目录

目录

系列笔记目录

文章目录

前言

一、Vuex是什么？

二、使用步骤

1.安装

2.挂在到vue实例中

3.组件中使用

总结

---

前言

学习vue2.0时特别记录如何使用vuex，现在只记录如何使用，后续再修改心得

---

一、Vuex是什么？

项目状态管理工具

二、使用步骤

1.安装

代码如下（示例）：

npm install vuex@3.X -S

2.挂在到vue实例中

代码如下（示例）：index.js

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

import { ADD_MUTATION } from '@/store/mutations-type'

const store = new Vuex.Store({
    state: {
        count: 1000
    },
    mutations: {
        [ADD_MUTATION](state,payload){
            state.count += payload.value
        }
    },
    actions:{
        addAction({commit},payload){
            setTimeout(()=>{
                commit(ADD_MUTATION,payload);
            },2000)
        }
    }
})

export default store;

在main.js中引用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from '@/store'
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

---

3.组件中使用

<template>
  <div class="home">
    <!-- 显示count -->
    <h1>111111111111</h1>
    <h2>{{ $store.state.count }}</h2>
    <h2>{{ count1 }}</h2>
    <h2>{{ count2 }}</h2>
    <hr>
    <button @click="changeCount1">普通方法修改调用Matation+1</button>
    <button @click="changeCount2">普通方法调用Action+2</button>
    <hr>
    <button @click="changeCount3">函数辅助调用Matation+3</button>
    <button @click="changeCount4">函数辅助调用Action+4</button>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { mapState,mapMutations,mapActions } from 'vuex';
import {ADD_MUTATION} from '@/store/mutations-type'
export default {
  name: 'HomeView',
  components: {
    // HelloWorld
  },
  computed:{
    ...mapState(['count']),
    ...mapState({
      count1:(state)=>{
        return state.count;
      },
      count2(state){
        return state.count;
      }
    })
  },
  methods:{
    ...mapMutations([ADD_MUTATION]),
    ...mapActions(['addAction']),
    changeCount1(){
      this.$store.commit(ADD_MUTATION,{value:1})
    },
    changeCount2(){
      this.$store.dispatch('addAction',{value:2})
    },
    changeCount3(){
      this[ADD_MUTATION]({value:3})
    },
    changeCount4(){
      this.addAction({value:4})
    }
  }
}
</script>

---

总结

以上为Vuex中state、matations、actions的用法