Vuex3.0使用记录

基本使用

state

vuex示例：
state: {
    title: 'title',
    count: 0,
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },   


### 方式一：
console.log(this.$store.state.count);

### 方式二：mapState辅助函数
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  }),
  methods:{
    tbn(){
        console.log(this.count);
        console.log(this.countAlias);
        console.log(this.countPlusLocalState);
  }  
}

### 方式三：
 computed: mapState([
     // 映射 this.count 为 store.state.count
     'count'
 ]),
methods中直接：this.count 访问

### 总结：对方式2和3的实际使用
computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
         countAlias:'count'
  }),
  ...mapState([
         'count','title'
   ])
}

getters

vuex示例：
  getters: {
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
    doneTodos(state) {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount(state, getters) {
      return getters.doneTodos.length
    },
    // doneTodosCount3(state) { //该方法错误
    //   return doneTodos().length
    // }
  },


### 方式一：通过属性访问
Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：
console.log(this.$store.getters.doneTodos);

Getter 也可以接受其他 getter 作为第二个参数：
console.log(this.$store.getters.doneTodosCount);

注意，getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的

### 方式二：通过方法访问
console.log(this.$store.getters.getTodoById(2));

### 方式三：mapGetters 辅助函数
import { mapGetters } from 'vuex'

 computed: {
        // 使用对象展开运算符将 getter 混入 computed 对象中
        ...mapGetters([
            'doneTodosCount',
            'anotherGetter',
            // ...
        ]),
        ...mapGetters({
            // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
            doneCount: 'doneTodosCount'
        })
    },


 methods: {
        btnMethod1() {
            console.log(this.doneTodosCount);
            console.log(this.doneCount);
        },
    }

mutations

vuex 示例：
mutations: {
    increment(state) {
      // 变更状态
      state.count++
    },
    increment(state, n) {
      state.count += n
    },
    incrementObj(state, payload) {
      state.count += payload.amount
    },
}


### 方式一：
 this.$store.commit('increment')

### 方式二：提交载荷（Payload）
 this.$store.commit('increment',10)

 以对象方式提交
 this.$store.commit('incrementObj', { amount :10})

### 方式三：对象风格的提交方式
 this.$store.commit({
                type: 'incrementObj',
                amount: 10
            })

### 方式四：mapMutations 辅助函数
import { mapMutations } from 'vuex'

methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为`this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    }),
    btnMethod1() {
       // 可直接在按钮上面绑定方法，以下底代码是我测试使用
       this.increment()
       this.incrementBy(2)
       this.add()
    }
  }


一条重要的原则就是要记住 mutation 必须是同步函数

actions

vuex示例
mutations: {
    increment(state) {
      // 变更状态
      state.count++
    },
    increment(state, n) {
      state.count += n
    },
    incrementAsync(state, payload) {
      state.count += payload.amount
    },
  },

actions: {
    increment(content) {
      content.commit('increment')
    },
    incrementAsync(content, payload) {
      content.commit('incrementAsync', payload)
    },

}

### 方式一：分发Aciton
this.$store.dispatch('increment')
注意点：如果mutations中存在通过increment方法，则提交不成功，

### 方式二：
    // 以载荷形式分发
   this.$store.dispatch('incrementAsync', {
        amount: 10
   })

    // 以对象形式分发
    this.$store.dispatch({
           type: 'incrementAsync',
           amount: 10
    })
    
### 方式三：mapActions 辅助函数
import { mapActions } from 'vuex'

methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    }),
    btnMethod1() {
        // 测试是演示使用，实际业务中直接绑定方法即可
        this.increment()
        this.incrementBy(2)
        this.add()
    }
  }

modules

### 创建子模块ModA.js
const state = {
    rootStatue:'true',
  };
  // 使用 mutation更新 state
  const mutations = {
    commitRootStatue: (state, sta) => (state.rootStatue = sta),
  
  };
  const actions = {
    setRootStatue:({commit},sta)=> commit('commitRootStatue',sta,)
  };
  
  const getters = {
    
  };
  
  export default {
    state,
    mutations,
    actions,
    getters,
    namespaced: true,
  };

### 创建子模块ModB.js
export default {
    namespaced: true,
    state: {
        count: 2,
        name: "modB"
    },
    getters: {
    },
    mutations: {
    },
    actions: {
    },
    modules: {
    }
}

### 主模块中使用
第一步先引入：
import modB from './module/modB'

第二步注册：
 modules: {
    // b: modB 命名为b
    modB //不命名
  }

子模块使用（b）

state

### 访问主状态管理
    ## 方式一
    console.log(this.$store.state.count);    
    
    ## 方式二：mapState辅助函数    
    ...mapState(['count']),

### 访问modB状态管理
    ## 方式一：
    console.log(this.$store.state.b.count);
    
    ## 方式二：mapState辅助函数
    ...mapState('b',['nameB']) //需带上命名空间
    console.log(this.nameB);   

    ## 该方式不行
    ...mapState({
         nameB:'b/nameB'  // 这种方式不行，获取不到nameB
    }),

getters

### 主状态管理
    ## 方式一：
        console.log(this.$store.getters.getCount);

    ## 方式二：mapGetters 辅助函数
        import { mapGetters } from 'vuex'
        computed: {
          ...mapGetters(['getCount'])  
        },
        console.log(this.getCount);


### modB模块状态管理
    ## 方式一：带命名空间访问
        console.log(this.$store.getters["b/getCount"]);
    
    ## 方式二：mapGetters 辅助函数
        import { mapGetters } from 'vuex'
        computed: {
            ...mapGetters('b', ['getCount']), //getCount主状态里面也有则不能使用，因为会覆盖主状态管理的
            ...mapGetters({
                getCountB:'b/getCount' //b表是导入的模块
            })
        },
        

mutations

### 主状态管理
    ## 方式一：
        this.$store.commit('increment')
        console.log(this.count);
    
    ## 方式二：mapMutations辅助函数
        ...mapMutations(
            ['increment']
        ),


### 子状态管理
    ## 方式一：
        this.$store.commit('b/increment')
        console.log(this.$store.state.b.count);

    ## 方式二：mapMutations辅助函数
        ...mapMutations({
            incrementB:'b/increment'
         }),

actions

### 主状态管理
    ## 方式一：
        this.$store.dispatch('increment')
        console.log(this.count);
    
    ## 方式二 ...mapActions辅助函数
        ...mapActions(
            ['increment']
        ),
        this.increment()


### 子状态管理
    ## 以下方式不行
        // this.$store.dispatch(b, ['increment'])
        // this.$store.dispatch('b/increment')
    
    ## 方式一：辅助函数
        ...mapActions({
            incrementB:'b/increment'
         }),
        this.incrementB()