vuex之簡單理解案例

vuex是狀態管理器，簡單的講就是管理前端數據的。他是一個單例的對象（也就是共享的數據）
做用：傳值，儲存
使用場景：用戶的登陸信息，某個全局須要的屬性或狀態，購物車
例子及步驟：
場景一：
1.安裝vuex npm install vuex --save
2.安裝好以後在src文件在建立一個store文件夾，在此文件夾中建立一個store.js文件。
3.store.js文件中 首先引入vue和vuex
    import Vue from 'vue'
    import Vuex from 'vuex'
而後將vuex運用到vue中 Vue.use(Vuex)
而後聲明一個 state(存放所有的狀態)
const state={
    count:0,
 }
最後將state暴露出來
export default new Vuex.Store({
    state,
})
4.在main.js中引入store.js文件
 import store from './store/store';
 引入只有store須要和vue的實例關聯起來
 new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
5.在用的頁面直接使用
<p>{{$store.state.count}}</p>
此時頁面上顯示的應該是0
6.若須要改變全局存儲的count此時咱們須要用到mutations
7.在store.js中繼續寫
聲明一個 mutations(用來改變state中的全局變量)
    const mutations={
       <!--方法-->
   add（state）{
    state.count++
   }，
   delete(state){
    state.count--
   },
 }
 8.一樣暴露mutations
  export default new Vuex.Store({
    mutations,
})
9.在用的頁面進行使用
  <p>{{$store.state.count}}</p>
  <button @click="addF">+</button>
  <button @click="delF">-</button>
 computed:{
     count:function (state) {
       return store.state.count
       },
 },
methods:{
    addF(){
      // 調運添加的方法
       <!--提交的時候要用commit進行提交給mutations-->
      this.$store.commit('add')
    },
    delF(){
      // 調運添加的方法
       <!--提交的時候要用commit進行提交給mutations-->
      this.$store.commit('delete')
    },
}
這樣就能夠了
場景二：
咱們在作國際化的時候，會全局存儲此時是中文狀態仍是英文狀態，那麼此時咱們能夠用到vuex
在store.js中繼續寫
const state={
lang:false
}
const mutations={
    E(state){
        state.lang=true
    },
    C(state){
        state.lang=false
    }
}
在使用的頁面
  <p>{{$store.state.lang==false ? '關' : '開'}}</p>
  <button @click="addF1">開</button>
  <button @click="delF1">關</button>
 methods:{
    addF1(){
      // 調運添加的方法
      this.$store.commit('E')
    },
    delF1(){
      // 調運添加的方法
      this.$store.commit('C')
    },
}
此時在全局能夠看到是英文狀態仍是中文狀態。
複製代碼