vuex的基本用法

vuex是什么:

专为vue开发的一个状态管理模式，相当于保存数据的一个大仓库，可以在任何地方对数据进行改变，其他组件中使用该数据时可以实时更新。简单点来说就是一个集中管理变量的地方，项目中的组件可以对这些变量进行获取和修改

怎么使用：

1、安装

npm i vuex --save

2、配置
在src目录下新建 store --> index.js

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

Vue.use(Vuex);

const store = new Vuex.Store({
	state: {  //要设置的全局访问的state对象
            //设置初始值
            count: 0, //文章总数
        },
        getters:{ //实时监听state值的变化（最新变化）
            getCount: state => {
                return state.count
            }
        },
        mutations:{ //唯一允许更改state
        	addCount(state){
        		state.count += 1
        	},
            changeCount(state,n){
                state.count = n
            },
        },
        actions:{ //触发更改
        	addCountFun(context){
        		context.commit("addCount")
        	},
            changeCountFun(context,n){
                context.commit("changeCount",n)
            },
        },
});
 
export default store;

3、main.js文件中引入store，然后进行全局注入

import store from './store' //引入store
 
new Vue({
  el: '#app',
  router,
  store,  //全局注入store
  template: '<App/>',
  components: { App }
})

4、在组件中使用

给state中的变量赋值：

this.$store.dispatch("actions中对应的函数名",值)

获取store中的变量值（获取值）：

this.$store.getters.getters中对应获取值的函数