状态管理

状态的分类

UI状态
用户状态
区别：是否存在数据库当中
将表示状态的数据放在store中，
哪个组件要用到数据就在store中取
get
想要修改就
set

Store

要将sotre直接传给根组件

const store =new Vuex.Store({
  state:{
    n:0
  },
  mutations:{
      plus(state){
      state.n=state.n+1
    }
  }
})
store.commit('plus')

computed:{
  x(){
return store.state.n}
}

触发操作。在methods中定义要改变状态的方法

methods:{
  add(){
  store.commit('plus')
  }
}

为什么要用辅助函数？

简化代码
使用方便

引入后不用赘余的写新名字

辅助函数

mapGetter

import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

mapStates

import {mapState} from "Vuex"

computed:{
  ...mapState([
    'n'
  ])
}

当映射的计算属性的名称和state的子节点的名称相同时，可以传一个字符串数组
为了避免在子组件中的commit要引入store
可以使用辅助函数 mapMutations

import {mapMutations} from 'vuex'

methods:{
  ...mapMutations(['plus'])
}

mutations必须是同步函数

因为Vue的 devtool跟踪不到数据变化，无法进行时间旅行

actions:{
  plusAsync(context){
setTimeout(()=>{
  context.commit('plus')
},1000)
}
}

import {mapActions} from "vuex"
methods:{
  ...mapMutations(['plusAsync'])
}

模块

 account: {
      namespaced: true,//命名空间

      // 模块内容（module assets）
      state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },
}

启用了命名空间的 getter 和 action 会收到局部化的 getter，dispatch 和 commit。换言之，你在使用模块内容（module assets）时不需要在同一模块内额外添加空间名前缀。更改 namespaced 属性后不需要修改模块内的代码。

computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},
methods: {
  ...mapActions([
    'some/nested/module/foo', // -> this['some/nested/module/foo']()
    'some/nested/module/bar' // -> this['some/nested/module/bar']()
  ])
}

简化

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

只需要在根js(main.js)下引入s

vuex