vuex 的简单配置

vuex主要用来解决多组件的状态管理

1. 安装问题就不多说了vuex的官网各种安装方式都存在，下面为vuex的网站
 

一：我们先在src目录下建立一个 store 文件夹，并且在下面建立一个 store.js 文件，方便维护管理

① 在 store.js 中引入 Vue 和 Vuex 并使用

//引用vue实例
import Vue from 'vue';
//引入Vuex
import Vuex from 'Vuex';
//使用Vuex
Vue.use(Vuex);

② main.js里写入：

import Vue from 'vue'
import App from "@/App.vue";
//@代表src
import store from '@/store/store.js'


Vue.config.productionTip = false


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

③ 完善一下store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //设置全局访问的对象的初始值
    //例子：初始数量
    //在页面中访问用:  this.$store.state.amount 可访问到变量 amount
    amount: 0
  },
    getters: {
    // 可实时监听 state 值得变化
    //例如: amount 变量的变化  
    //在页面中访问用:  this.$store.getters.getAmount 可访问到变量 amount
    getAmount(amount ) {
    return state.amount 
    }
},
// 如需要要修改store中的值唯一的方法就是提交 mutation
// 在页面中的methods里添加一个函数用this.$store.commit('add')
// 在页面中的methods里添加一个函数用this.$store.commit({
                                    //       type: 'decrease',
                                   //       count: 10
                                  // })
  mutations: {
   // 例如: 
    //加
    add(state) {
            state.amount++
        },
    //减    
    decrease (state,payload) {
        stae.amount = state.amount-payload.count
}
  },
  actions: {

  }
})

这些是作为前端小菜鸟自己看官网后的理解，不对之处请指出谢谢各位大佬！！！