vuex基础用法1.0

1.安装跟版本   npm install vuex

可以在package.json文件里看到你的安装版本

 2.将vuex引入全局

2.1   先创建文件夹目录和js文件。

 2.2    我的index.js代码（你们可以直接复制玩一下）

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state:{
        currDbSource: {},
    },
    mutations:{
        saveCurrDbSource(state,currDbSource){
            state.currDbSource = currDbSource;
        },
    }
})

2.3   在main.js文件里引入全局   （注意一下引入的路径即可）

// 引入vuex-store
import store from './store/index';
 
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
});

3.可以利用vuex来存储数据了

这里我用click点击方法触发,用来存储数据       你们会玩了    可以灵活运用

export default {
    data(){
         name:'小明'    
        }
    methods:{
    click(){
        // 点击按钮进行一些操作，然后保存数据
        this.$store.commit('saveCurrDbSource',this.name)
    }
  }
}

4.用vuex获取数据(要你之前进行了存储的操作,否则获取不到的)

4.1   用法一

  这里是我直接在我是打印出来的(哪个地方需要,可以直接去这样获取,然后再去赋值)

mounted(){
    console.log('vuex数据',this.$store.state.currDbSource)
    }

4.2  用法二

  运用computed来获取state的值(这样就可以拿到currDbSource整个对象了)

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

4.3   用法三

  运用mapState来辅助获取state的值 (这样就可以拿到currDbSource整个对象了)

import {mapState } from 'vuex'
 
computed:{
          ...mapState(["currDbSource"])
         }

在页面上运用插值表达式进行渲染

{{testObj.name}}

自定义变量名字

import {mapState } from 'vuex'
 
computed:{
          ...mapState({
                 names:(state)=>state.currDbSource
               })
         }

{{names.name}}

这个就是新手进门级别state的用法,还有进阶的用法。后续出