vuex的使用

1. 引入VUEX

npm install vuex --save

2. 在main.js引入

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

3. 注册

new Vue({
  store
})

4. state

const state={
    count:1
}

使用

• 标签内

<h3>{{$store.state.count}}</h3>

-. 计算属性

<h3>{{count}}</h3>
computed:{
    count(){
        return this.$store.state.count;
    }
}

• mapState 对象形式

import {mapState} from 'vuex';
computed:mapState({
        count:state=>state.count
 })

或者
computed:mapState({
        count: 'count'
 })

• mapState数组形式

computed:mapState(["count"])

5. mutations

const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}

使用

• 标签内

<button @click="$store.commit('reduce')">-</button>

• mapMutations

import { mapState,mapMutations } from 'vuex';
methods:mapMutations([
        'add','reduce'
])
<button @click="reduce">-</button>

6. getters

const getters = {
    count:function(state){
        return state.count +=100;
    }
}

使用

• computed

computed:{
    ...mapState(["count"]),
    count(){
        return this.$store.getters.count;
    }
},

• mapGetters

import { mapState,mapMutations,mapGetters } from 'vuex';
...mapGetters(["count"])

7. actions

const actions ={
    addAction(context){
        context.commit('add',10)
    },
    reduceAction({commit}){
        commit('reduce')
    }
}

用法

• mapActions

 import { mapState,mapMutations,mapGetters } from 'vuex';
methods:{
    ...mapMutations([  
        'add','reduce'
    ]),
    ...mapActions(['addAction','reduceAction'])
},

• js内

mounted(){
  this.$store.dispatch('addAction'， {})；
},

8. 使用

export default new Vuex.Store({
    state,mutations,getters,actions
})

9. 模块

• 一般结构

const moduleA = {
 state: { ... },
 mutations: { ... },
 actions: { ... },
 getters: { ... }
 }
const moduleB = {
 state: { ... },
 mutations: { ... },
 actions: { ... }
 }
 
const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB})

其中：

• state是局部的， 需要通过this.$store.state.a.lis方法来获取。

• getter、mutation和action是全局注册：this.$store.state.carGetter可以拿到

• 全局参与模块参数

export default new Vuex.Store({
  // 通过modules属性引入login 模块。
  modules: {
    login: login
  },
 
  // 新增state, getters
  state: {
    job: "web"
  },
  getters: {
    jobTitle (state){
      return state.job + "developer"
    }
  }
})

• 局部 actions, mutations, getters,
  namespaced:true

// namespaced 属性，限定命名空间
export default {
  namespaced:true,
  state,
  mutations,
  actions,
  getters
}

 dispatch("login/changeName")
getters["login/localJobTitle"]

• 局部获取

<script>
import {mapActions, mapState,mapGetters} from "vuex";
export default {
 // computed属性，从store 中获取状态state，不要忘记login命名空间。
 computed: {
  ...mapState("login",{
   useName: state => state.useName
  }),
 
   localJobTitle() {
    return this.$store.getters["login/localJobTitle"]
   }
 },
 methods: {
  changeName() {
   this.$store.dispatch("login/changeName", "Jason")
  },
  alertName() {
   this.$store.dispatch("login/alertName")
  }
 }
}
</script>

• 局部获取2

<script>
import {mapActions, mapState,mapGetters} from "vuex";
export default {
 computed: {
  // 对象中的state 和数组中的localJobTitle 都是和login中的参数一一对应。
  ...mapState("login",{
   useName: state => state.useName
  }),
  ...mapGetters("login", ["localJobTitle"])
 },
 methods: {
  changeName() {
   this.$store.dispatch("login/changeName", "Jason")
  },
  ...mapActions('login', ['alertName'])
 }
}
</script>