vuex基本使用

基本使用

• 安装
  npm i vuex --save
• 在项目中导入vuex包
  import Vuex from vuex
Vue.use(Vuex)
• 创建store对象
  const store = new Vuex.store({ //state中存放的就是全局共享的数据 state: {} })
• 将store挂载到 vue实例对象中
  new Vue({ el: '#app', render: h => h(app), //render渲染app根组件 router, //router挂载路由 store //将创建的共享数据对象，挂载到vue实例中 //所有的组件，就可以直接从store中获取全局的数据了 })

核心

• state 存放全局共享的数据
  • 组件访问state中数据的方式1
    • this.$store.state('')
  • 组件访问state中数据的方式2
    • 从vuex中导入mapState函数 import {mapState} from 'vuex'
    • 将全局数据映射为当前组件的计算属性 computed: {...mapState([''])}
• mutation 用于变更state中的数据

• 不要在mutations里面使用异步

• 简易写法 import mapMutations from 'vuex' …mapMutations ([’’])

• action 处理异步

  • 简易写法 import mapActions from 'vuex' …mapAction([’’])

• getter 用于对Store中的数据进行加工处理形成新的数据，不会改变原数据

  • Store中的数据发生变化，getter中的数据也会发生变化

• 相当于计算属性的作用
• 简易写法 import ...mapGetter from 'vuex' …mapGetter ([’’])