学习笔记之Vuex的用法总结(Vue状态管理)

npm i vuex --save

│  App.vue
│  main.js
│
├─assets
│      logo.png
│
├─components
│      HelloWorld.vue
│
├─router
│      index.js
│
└─store
       index.js

import Vue from 'vue'; //首先引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex) 
export default new Vuex.Store({
    state: { 
        // state 类似 data
        //这里面写入数据
    },
    getters:{ 
        // getters 类似 computed 
        // 在这里面写个方法
    },
    mutations:{ 
        // mutations 类似 methods
        // 写方法对数据做出更改(同步操作)
    },
    actions:{
        // actions 类似 methods
        // 写方法对数据做出更改(异步操作)
    }
})
//可能有的地方书写的风格不是这样的，如果需要的了解的可以百度看看其他人的

//main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,  //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中；所有的组件，可以直接从 store 中获取全局数据了
  render: h => h(App)
})

<template>
    <div id='app'>
        name:
        <h1>{{ $store.state.count}}</h1>
    </div>
</template>

...,
methods:{
    add(){
    //使用this.$store.state.xxx可直访问到仓库中的状态
      console.log(this.$store.state.count)
    }
},
...

//创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
  state: {
    count: 0
  },

// vue模板中不要使用this
this.$store.state.全局数据名称

// 1. 从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'

// 2. 将全局数据，映射为当前组件的计算属性
computed:{
  ...mapState (['count'])
  //如果使用的名称和index.js中的一样，直接写成上面数组的形式就行，
 // 如果想改变下名字，写法如下
  ...mapState({
     newCount: state => state.count
  })

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters:{
    showNum(state){
        return "当前最新的数量是【'+ state.count +'】"
    },
    fullNum(state,getters){
        return getters.showNum +'增加1:'+ state.count++
    }  
}

//组件中调用
this.$store.getters.fullNum

this.$store.getters.名称

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters (['fullNum'])

//组件中使用  跟计算属性一样调用
<template>
  <div>
    <h2>当前最新的count值为{{ fullNum }}</h2>
  </div>
</template>

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        addCount(state) {
            state.count = 5;
        },
        addCountIsWhat(state, payload) { // 增加一个带参数的mutations方法，并且官方建议payload为一个对象
            state.count = payload.count;
        },
    },
});
export default store;

<script>
export default {
    mounted() {
        this.$store.commit('addCountIsWhat', {count：10}); // 调用的时候也需要传递一个对象
    }
}
</script>

this.$store.commit('mutations 中的方法名')

<script>
import { mapMutations } from 'vuex';
export default {
    mounted() {
        this.addCountIsWhat({count：20});
    },
    methods: {   // 注意，mapMutations是解构到methods里面的，而不是计算属性了
        ...mapMutations(['addCountIsWhat']),
    },
}
</script>

export default new Vuex.Store({
  state: {
    count: 0
  },
  //只有 mutations 中定义的函数，才有权利修改 state 中的数据
  mutations: {
    addCountIsWhat(state,payload){
      state.count = payload.count
    }
  },
  actions: {
    setCount(context,payload){  //默认第一个参数是context，其值是复制的一份store
       setTimeout(()=>{
           context.commit('addCountIsWhat',payload)
        },1000)
    }
})

this.$store.dispath('setCount',{count:300})

actions: {
  setCount({ commit },payload) {
    commit('addCountIsWhat',payload)
  }
}

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('addCountIsWhat')
        resolve()
      }, 1000)
    })
  }
}

store.dispatch('actionA').then(() => {
  // ...
})

store.dispatch('actionA').then(() => {
  // ...
})

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('addCountIsWhat')
    })
  }
}

// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

this.$store.dispath('Actions 中的方法名')

import { mapActions } from 'vuex'
methods:{
  ...mapActions (['addAsync','addNasync'])

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

const state = {
  useName: "sam"
};
const mutations = {
};
const actions = {
};
const getters = {
};
// 不要忘记把state, mutations等暴露出去。
export default {
  state,
  mutations,
  actions,
  getters
}

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
// 引入login 模块
import login from "./login"
export default new Vuex.Store({
  // 通过modules属性引入login 模块。
  modules: {
    login: login
  }
})

import Vue from 'vue'
import App from './App.vue'
// 引入store
import store from "./store"
new Vue({
 el: '#app',
 store, // 注入到根实例中。
 render: h => h(App)
})

<template>
 <div id="app">
    <img src="./assets/logo.png">
    <h1>{{useName}}</h1>
 </div>
</template>
<script>
export default {
 // computed属性，从store 中获取状态state，不要忘记login命名空间。
 computed: {
  useName: function() {
   return this.$store.state.login.useName
  }
 }
}
</script>

const mutations = {
  change_name (state, anotherName) {
    state.useName = anotherName;
  }
};
const actions = {
  changeName ({commit},anotherName) {
    commit("change_name", anotherName)
  }
};

<template>
 <div id="app">
  <img src="./assets/logo.png">
  <h1>{{useName}}</h1>
  <!-- 添加按钮 -->
  <div>
   <button @click="changeName"> change to json</button>
  </div>
 </div>
</template>
<script>
export default {
 // computed属性，从store 中获取状态state，不要忘记login命名空间。
 computed: {
  useName: function() {
   return this.$store.state.login.useName
  }
 },
 methods: {
　　// 和没有modules的时候一样，同样的方式dispatch action
  changeName() {
   this.$store.dispatch("changeName", "Jason")
  }
 }
}
</script>

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

const mutations = {
  change_name (state, anotherName) {
    state.useName = anotherName;
  }
};
const actions = {
  // actions 中的context参数对象多了 rootState 参数
  changeName ({commit, rootState},anotherName) {
    if(rootState.job =="web") {
      commit("change_name", anotherName)
    }
  }
};
const getters = {
  // getters 获取到 rootState, rootGetters 作为参数。
  // rootState和 rootGetter参数顺序不要写反，一定是state在前，getter在后面，这是vuex的默认参数传递顺序， 可以打印出来看一下。
  localJobTitle (state,getters,rootState,rootGetters) { 
    console.log(rootState);
    console.log(rootGetters);
    return rootGetters.jobTitle + " aka " + rootState.job 
  }
};

const state = {
  useName: "sam"
};
const mutations = {
  change_name (state, anotherName) {
    state.useName = anotherName;
  }
};
const actions = {
  changeName ({commit, rootState},anotherName) {
    if(rootState.job =="web") {
      commit("change_name", anotherName)
    }
  },
  alertName({state}) {
    alert(state.useName)
  }
};
const getters = {
  localJobTitle (state,getters,rootState,rootGetters) { 
    return rootGetters.jobTitle + " aka " + rootState.job 
  }
};
// namespaced 属性，限定命名空间
export default {
  namespaced:true,
  state,
  mutations,
  actions,
  getters
}

<template>
 <div id="app">
  <img src="./assets/logo.png">
  <h1 @click ="alertName">{{useName}}</h1>
  <!-- 增加h2 展示 localJobTitle -->
  <h2>{{localJobTitle}}</h2>
  <!-- 添加按钮 -->
  <div>
   <button @click="changeName"> change to json</button>
  </div>
 </div>
</template>
<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>

<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>