vue项目常用依赖安装⑥——vuex

一、介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。中文官方地址如下：vuex官网

二、安装

npm install vuex --save

三、配置

1. 在系统入口文件main.js中引入vuex，代码如下：

//引入vuex
import store from './store/index' //引入状态管理创建得index文件
import Vuex from 'vuex'
Vue.use(Vuex)
// 定义实例
new Vue({
  el: '#app',
  store,// 注入框架中
  components: { App },
  template: '<App/>'
})

2. 在根目录src下创建store得文件夹，在store文件下创建index.js如图：

代码如下：

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

export default new Vuex.Store({
  state: {
    count: 0,//状态
  },
  mutations: {
    increment(state) {
      state.count ++;
    },
    decrement(state) {
      state.count --;
    }
  },
});

3. 在组件使用：代码如下

文本通过$store.state.msg即可访问

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

mapState辅助函数访问

import {mapState} from 'vuex'

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

简单移动详情代码如下：

<template>
  <div>
    <div class="panel-body">
      <p>{{ count }}</p>
      <p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
      </p>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default({
    name:'home',
    data:function () {
      return {

      }
    },
    methods:{
        increment(){
          this.$store.commit('increment')
          //commit方法的第一个参数是要发起的mutation名称，后面的参数均当做额外数据传入mutation定义的方法中。
        },
        decrement(){
          this.$store.commit('decrement')
        }
    },
    computed:{
      ...mapState(['count']),
    }
  })
</script>

<style scoped>

</style>

效果如图操作观看：