uniapp 全局变量写法vuex 基于vue2

这里记录一下使用过程。返现还是用vuex来左全局变量稳一点

按照官网的说法来写即可
官网都写的比较清楚了。不过这里还是记录一下方法 和难点

基本使用

1.创建store

创建文件 /store/index.js

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

Vue.use(Vuex)
const store = new Vuex.Store({  
    state: {  
        login: false,  
        token: '',  
        avatarUrl: '',  
        userName: ''  
    },  
     
})
export default store

main.js 中引入

import store from './store'  
Vue.prototype.$store = store

2.获取store的属性

直接这样写就行了
this.$store.state.userName

3.修改store的值

官方有明确说明Vuex中store数据改变的唯一方法就是mutation
将store的index.js文件修改以下。加入mutation。

///store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    login: false,
    token: '',
    avatarUrl: '',
    userName: ''
  },
  mutations: {
    setUserName(state,newUserName) {
      // 变更状态（外部传入 newUserName）
      state.userName =newUserName
    }
     setUserName2(state) {
      // 变更状态（无外部参数）
      state.userName ='111'
    }
  }

})
export default store

mutations里面的方法，默认第一个参数都是state。后面如果需要外部传入参数，追加在第二个参数即可

在vue页面进行调用即可.例如我这里将用户名称改为666

<script>
  
  export default {
     
    created() {
 
      this.$store.commit("setUserName","666")
       
 
    },
    ...

4.关于官网的三个点(…) mapState mapMutations的写法

本人前端不是很熟，这里记录一下

…应该是es6的写法

百度了一下，这里是这样说的
…表示是 扩展运算符 用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。

mapState 和 mapMutations 是vuex的方法即辅助函数

官方是这样写的

<script>  
    import {  
        mapState,  
        mapMutations  
    } from 'vuex';  

    export default {  
        computed: {  
            ...mapState(['avatarUrl', 'login', 'userName'])  
        },  
        methods: {  
            ...mapMutations(['logout'])  
        }  
    }  
</script>

这里的...mapState(['avatarUrl', 'login', 'userName']) 。应该就等同于
把这3个变量从vuex取出来，放在当前vue页面作为属性

...mapMutations(['logout']) 应该就等同于在当前vue页面中，声明vuex里面的这个函数

不过，既然咱也不是前端大牛，按照普通写法就好了。也没必要这样写，反而回头把自己坑了