vue项目里面引入vuex

vuex是一个专为vue.js应用程序开发的状态管理模式，他采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简而言之就是大家都要用的数据，大家都不要拿，放在vuex中

安装

npm i vuex --save

安装vuex报错
如果直接安装vuex，不指定版本的话，就会直接安装最新的vuex的版本

image.png

解决办法
1.检查一下适应的Vuex版本号

npm view vuex versions --json

2.安装特定的版本，如版本3.6.2

npm i [email protected] --save

基本使用

Base

先在src路径下建立store文件夹 然后在文件夹里面建立index.js文件 src/store/index.js

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state:{
        name:"name",
        age:"age",
        pathName: "",
        currDbSource: "1234516",
        currJobData: {},
        DbSource: []
    },
    mutations:{
        // 保存当前菜单栏的路径
        savePath(state,pathName){
            state.pathName = pathName;
        },
        // 保存当前点击的数据源
        saveCurrDbSource(state,currDbSource){
          console.log("220");
            console.log(currDbSource);
        },
        // 保存当前点击的元数据
        saveCurrJobData(state,currJobData){
            state.currJobData = currJobData;
        },
        // 保存所有数据源
        saveDbSource(state,DbSource){
            state.DbSource = DbSource;
        }
    }
})

main.js

// 1.引入
import Vue from 'vue'
import App from './App.vue'
import router from './router';
// 引入vuex-store
import store from './store/index';

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

组件中 比如在mounted方法里面打印

 mounted(){
    console.log("使用vuex");
    console.log(this.$store.state.currDbSource);//获取vuex里面的公共参数对象
    this.$store.commit('saveCurrDbSource',"123"); //调用vuex里的公共方法
  },

模板中：

总结—vuex是单向数据流
state --> components -->dispatch --> actions --> commit --> mutations --> 修改(mutate) --> state --> components …

state 决定了 components 展示的样子，然后在组件中可以通过 dispatch 触发 actions 做逻辑，然后 actions 会 commit 到 mutationas ，mutations 开始修改（mutate），修改完成后 state 发生变化，从而 components 再次发生改变