vuex详解

image.png

• 在vue中我们通过vuex来管理状态，该值一但被修改，所有引用该值的地方都会自动更新
  项目的src文件下的store文件中新建一个index.js文件如下：

import  Vue  from ' vue'
import  Vuex from 'vuex'
//使用vuex
vue.use(Vuex)vuex
//创建vuex实例
const  store=new vuex.Store({

})
export default store

• 然后我们在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象；

import Vue from 'vue'
import store from '/store'
new vue({
store
})

State

• vuex的数据源，在页面获取需要使用this.$store.state来获取state数据

import  Vue  from ' vue'
import  Vuex from 'vuex'
//使用vuex
vue.use(Vuex)vuex
//创建vuex实例
const  store=new vuex.Store({
    state:{
          count:1
    }
})
export default store

• 在页面就可以使用this.$store.state.count来获取数据
  还可以这样写