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
        //這里面寫入數(shù)據(jù)
    },
    getters:{ 
        // getters 類似 computed 
        // 在這里面寫個(gè)方法
    },
    mutations:{ 
        // mutations 類似 methods
        // 寫方法對(duì)數(shù)據(jù)做出更改(同步操作)
    },
    actions:{
        // actions 類似 methods
        // 寫方法對(duì)數(shù)據(jù)做出更改(異步操作)
    }
})
//可能有的地方書寫的風(fēng)格不是這樣的，如果需要的了解的可以百度看看其他人的

//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一樣，將我們創(chuàng)建的Vuex實(shí)例掛載到這個(gè)vue實(shí)例中；所有的組件，可以直接從 store 中獲取全局?jǐn)?shù)據(jù)了
  render: h => h(App)
})

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

...,
methods:{
    add(){
    //使用this.$store.state.xxx可直訪問到倉(cāng)庫(kù)中的狀態(tài)
      console.log(this.$store.state.count)
    }
},
...

//創(chuàng)建store數(shù)據(jù)源，提供唯一公共數(shù)據(jù)
const store = new Vuex.Store({
  state: {
    count: 0
  },

// vue模板中不要使用this
this.$store.state.全局?jǐn)?shù)據(jù)名稱

// 1. 從 vuex 中按需導(dǎo)入 mapState 函數(shù)
import { mapState } from 'vuex'

// 2. 將全局?jǐn)?shù)據(jù)，映射為當(dāng)前組件的計(jì)算屬性
computed:{
  ...mapState (['count'])
  //如果使用的名稱和index.js中的一樣，直接寫成上面數(shù)組的形式就行，
 // 如果想改變下名字，寫法如下
  ...mapState({
     newCount: state => state.count
  })

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters:{
    showNum(state){
        return "當(dāng)前最新的數(shù)量是【'+ state.count +'】"
    },
    fullNum(state,getters){
        return getters.showNum +'增加1:'+ state.count++
    }  
}

//組件中調(diào)用
this.$store.getters.fullNum

this.$store.getters.名稱

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

//組件中使用  跟計(jì)算屬性一樣調(diào)用
<template>
  <div>
    <h2>當(dāng)前最新的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) { // 增加一個(gè)帶參數(shù)的mutations方法，并且官方建議payload為一個(gè)對(duì)象
            state.count = payload.count;
        },
    },
});
export default store;

<script>
export default {
    mounted() {
        this.$store.commit('addCountIsWhat', {count：10}); // 調(diào)用的時(shí)候也需要傳遞一個(gè)對(duì)象
    }
}
</script>

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

<script>
import { mapMutations } from 'vuex';
export default {
    mounted() {
        this.addCountIsWhat({count：20});
    },
    methods: {   // 注意，mapMutations是解構(gòu)到methods里面的，而不是計(jì)算屬性了
        ...mapMutations(['addCountIsWhat']),
    },
}
</script>

export default new Vuex.Store({
  state: {
    count: 0
  },
  //只有 mutations 中定義的函數(shù)，才有權(quán)利修改 state 中的數(shù)據(jù)
  mutations: {
    addCountIsWhat(state,payload){
      state.count = payload.count
    }
  },
  actions: {
    setCount(context,payload){  //默認(rèn)第一個(gè)參數(shù)是context，其值是復(fù)制的一份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')
    })
  }
}

// 假設(shè) 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, // 注入到根實(shí)例中。
 render: h => h(App)
})

<template>
 <div id="app">
    <img src="./assets/logo.png">
    <h1>{{useName}}</h1>
 </div>
</template>
<script>
export default {
 // computed屬性，從store 中獲取狀態(tài)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 中獲取狀態(tài)state，不要忘記login命名空間。
 computed: {
  useName: function() {
   return this.$store.state.login.useName
  }
 },
 methods: {
　　// 和沒有modules的時(shí)候一樣，同樣的方式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參數(shù)對(duì)象多了 rootState 參數(shù)
  changeName ({commit, rootState},anotherName) {
    if(rootState.job =="web") {
      commit("change_name", anotherName)
    }
  }
};
const getters = {
  // getters 獲取到 rootState, rootGetters 作為參數(shù)。
  // rootState和 rootGetter參數(shù)順序不要寫反，一定是state在前，getter在后面，這是vuex的默認(rèn)參數(shù)傳遞順序， 可以打印出來看一下。
  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 中獲取狀態(tài)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: {
  // 對(duì)象中的state 和數(shù)組中的localJobTitle 都是和login中的參數(shù)一一對(duì)應(yīng)。
  ...mapState("login",{
   useName: state => state.useName
  }),
  ...mapGetters("login", ["localJobTitle"])
 },
 methods: {
  changeName() {
   this.$store.dispatch("login/changeName", "Jason")
  },
  ...mapActions('login', ['alertName'])
 }
}
</script>