vue 3.0 項目搭建移動端 (九) vuex的使用

先創建store數據倉庫

import Vue from 'vue'
import Vuex from 'vuex'

// import user from './modules/user'



Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        // user,
    },
    state: {},
    mutations: {},
    actions: {},
    getters
})

 

 然后在main.js中引入並注冊

import store from './store'

 

 注冊

 使用vuex

 import {mapState,mapMutations} from 'vuex'

在.vue組件中定義一個對象

computed：{
  ...mapState([        //mapState本是一個函數，在里面寫一個數組，記得加...
  ‘num’ ， //存的數據
  ‘id’
  ])
}

tore.state.num映射this.num這個this 很重要，這個映射直接映射到當前Vue的this對象上。

然后就可以不用$store.state.num引用了,直接插值

{{num}}{{id}}   //引用多個

 

 

 https://vuex.vuejs.org/zh/guide/state.html

let mapState = {num:0,id:111}
let computed = {...mapState}
console.log(computed )

// 在單獨構建的版本中輔助函數為 Vuex.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
    }
  })
}

當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字符串數組。

computed: mapState([
  // 映射 this.count 為 store.state.count
  'count'
])

mapState 函數返回的是一個對象。我們如何將它與局部計算屬性混合使用呢？通常，我們需要使用一個工具函數將多個對象合並為一個，以使我們可以將最終對象傳給 computed 屬性。但是自從有了對象展開運算符，我們可以極大地簡化寫法：

computed: {
  localComputed () { /* ... */ },
  // 使用對象展開運算符將此對象混入到外部對象中
  ...mapState({
    // ...
  })
}

<template>
  <div class="home">
    <!-- <button class="btn" @click="$store.commit('add',1)">點擊加</button>
    <button class="btn"  @click="$store.commit('reduce',2)">點擊減</button> -->
    <button class="btn" @click="add(2)">點擊加</button>
    <button class="btn" @click="reduce(1)">點擊減</button>
    <div>stor里面的count:{{count}}</div>
  </div>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  export default {
    name: 'home',
    data() {
      return {}
     },
    created() {},
    computed: {
      // 方法一：--------------------------------------
      // count(){
      //   return this.$store.state.count
      // },

      //方法二：mapState-------------------------------
      //寫法1：（mapState中用對象的形式獲取）
      // ...mapState({
      //   count:state=>state.count
      // })
      // 寫法2：mapState中用數組的形式獲取）：
      ...mapState(["count"])
    },
    methods: {
      //方法三：mapMutations -------------------------- 此方法只能寫在 methods里面，在其他地方調用即可
      ...mapMutations(['add', 'reduce'])
    }
  }
</script>
<style scoped="scoped">
  .btn {
    display: block;
    width: 90%;
    height: 45px;
    margin: 0 auto;
    margin-bottom: 30px;
  }
</style>

其它例子

mapState使用：

import {mapState} from 'vuex'
      computed:{
        ...mapState({
      // car:'car',//最簡單的寫法
      car:state=>state.car//也可以這樣寫
                    })
      },
      //如果要監聽car的數據改變，可以結合watch來使用。methods方法中也可以通過this.car訪問到。

mapMutations使用：

import {mapMutations} from "vuex";
  methods: {
    ...mapMutations(["addToCar"]),//映射成this.addToCar
    cz() {
      this.addToCar("change");
    }
  },

其他使用方式了

<template>
  <div id="example">
    <button @click="decrement">-</button>
    {{count}}
    {{dataCount}}
    <button @click="increment">+</button>
    <div>{{sex}}</div>
    <div>{{from}}</div>
    <div>{{myCmpted}}</div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      str: '國籍',
      dataCount: this.$store.state.count
    }
  },
  computed: mapState({
    count: 'count', // 第一種寫法
    sex: (state) => state.sex, // 第二種寫法
    from: function (state) { // 用普通函數this指向vue實例,要注意
      return this.str + ':' + state.from
    },
    // 注意下面的寫法看起來和上面相同,事實上箭頭函數的this指針並沒有指向vue實例,因此不要濫用箭頭函數
    // from: (state) => this.str + ':' + state.from
    myCmpted: function () {
      // 這里不需要state,測試一下computed的原有用法
      return '測試' + this.str
    }
  }),
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  },
  created () {
    // 寫個定時器，發現computed依舊保持了只要內部有相關屬性發生改變不管是當前實例data中的改變，還是vuex中的值改變都會觸發dom和值更新
    setTimeout(() => {
      this.str = '國家'
    }, 1000)
  }
}
</script>

 https://blog.csdn.net/dkr380205984/article/details/82185740

實例

index.js

import Vue from 'vue'
import Vuex from 'vuex'

import user from './modules/user'
// import getters from './getters'



Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        user,
    },
    state: {},
    mutations: {},
    actions: {},
    // getters  //其他數據這里可以自定義
})

 

 user.js

import Vue from 'vue'
// import {getUserInfo, getLogin} from "../../api/login";
import session from '../sessionStorage'
// import local from '../localStorage'
// import {getToken,removeToken} from "../../utils/auth";

const user = {
    state: {
        // token: getToken(),
        device: 'android',
        wxUserInfo: session.$getSessionStorageByName('wxUserInfo') || '',
        aliUserInfo: session.$getSessionStorageByName('aliUserInfo') || '',
        info: session.$getSessionStorageByName('userInfo') || {}
    },

    mutations: {
        SET_DEVICE: (state, device) => {
            state.device = device
        },
        // SET_TOKEN: (state, token) => {
        //     state.token = token
        // },
    },

    actions: {
        // 登錄
        // Login({commit}, userInfo) {
        //     userInfo.username = userInfo.username.trim()
        //     return new Promise((resolve, reject) => {
        //         getLogin(userInfo).then(res => {
        //             if (res.status === 1) {
        //                 session.$setSessionStorageByName('userId', res.data.id)
        //             }

        //             resolve(res)
        //         }).catch(error => {
        //             reject(error)
        //         })
        //     })
        // },

    }
}

export default user

使用sotre中的函數