VS2019下尝试vuex

安装

在src目录下创建文件夹store、添加index.js文件

import Vue from 'vue';//Vue 核心库导人
import Vuex from 'vuex';//Vue 核心库导人

Vue.use(Vuex)

//创建构造函数
const store = new Vuex.Store({
//注意：new Vuex.Store Store 必须大写  vuex__WEBPACK_IMPORTED_MODULE_1__.default.store is not a constructor
    state() {
        return {
            user: {name:"陈熙之",sex:"男"},
        }
    },
    

	//strict: true,//为了避免在mutation 中使用异步调用，你可以开启严格模式，但是在生成环境下不要开启，以免影响性能，使用以下方式，判断配置文件的开发环境
    strict: process.env.NODE_ENV !=='production',
    mutations:{//只能同步调用 对state做修改
        newuser:(state, newuser) => {//传参 调用方式this.$store.commit('newuser', this.newuser)
            state.user = newuser
        },
        setname: (state) => {//不传参 this.$store.commit('setname')
            state.user.name = '';
        }
    },


	getters: {
        user: state => state.user,  // state().user  调用方式 this.$store.getters.user
        url: () => "www.baidu.com",// 调用方式 this.$store.getters.url
    },


	actions: {
        updateuser(context, newuser) {//这个context可以理解为store
            context.commit('newuser', newuser)//调用方式 let newuser = {name: "西瓜", sex: "女"} this.$store.dispatch('updateuser', newuser)
        },
        clearuser(context) {
            context.commit('setname')//调用方式 this.$store.dispatch('clearuser')
        },
    }
})

//导出store
export default store

异步会出异常：

Error in callback for watcher "function () { return this._data.$$state }": 
"Error: [vuex] do not mutate vuex store state outside mutation handlers."

如果有多个模块的状态，可以分别把上面的内容写到js文件
再导入对应的文件，加入到modules中

import app from './modules/app'
import tenant from './modules/tenant'
import form from './modules/form'
import flowschemes from './modules/flowschemes'
import flowinstances from './modules/flowinstances'
import serverConf from './modules/serverConf'
import user from './modules/user'

const store = new Vuex.Store({
  modules: {
    app,
    form,
    flowschemes,
    flowinstances,
    user,
  },
  getters

在main.js中导入、注册

//没有写完整路径，当webpack检测到store是文件夹时，会自动导入其中的index.js文件
import store from './store'//状态   

new Vue({
    el: "#app",
    //使用JavaScript 展开运算符，因此...Test 表达式会将属性复制到应用定义对象。它的主要优点是，在开发工具中不再有无用的顶层组件；它会成为我们的根组件。
    ...AppLayout,//等同render: h => h(AppLayout),
    router,
    store
});

现在所有的组件都可以使用$store 这个特殊的属性访问store 了

当前用户：{{$store.state.user.name}}

console.log("this.$store.state.user", this.$store.state.user)//eslint-disable-line

利用mutations修改

<input type="text" v-model="newuser.name" /> 
        <select v-model="newuser.sex">
            <option value="男">男</option>
            <option value="女">女</option>
        </select> 
        <input type="button"  value="改名字" @click="changeuser" /></div>

data() {
            return {
                newuser:
                {
                    name:"",
                    sex:''
                }
            }
        }, methods: {
            changeuser() {
                //do not mutate vuex store state outside mutation handlers.
                if (this.newuser)
                    this.$store.commit('newuser', this.newuser)//mutations 的 newuser

                this.newuser = []
            }
        },

修改了之后this.newuser = [] 是为了避免异步问题出现。

利用getters获取数据

console.log("this.$store.state.user", this.$store.state.user)//eslint-disable-line
console.log("this.$store.getters.user", this.$store.getters.user)//eslint-disable-line
console.log("this.$store.getters.url", this.$store.getters.url)//eslint-disable-line

推荐是使用this.$store.getters.user而不是this.$store.state.user

//计算属性中加入
computed: {
	...mapGetters(['user','url']),//把store getters的计算属性加入到VUE的计算属性中
}

mapGetters(['user', 'url'])
等价于
{
	user(){ return this.$store.getters.user },
	url(){ return this.$store.getters.url }
}

也就是说把store的getters计算属性加入到VUE页/组件的计算属性中

geturl() {
	console.log("url()", this.url)//eslint-disable-line
	console.log("user()", this.user)//eslint-disable-line
}

分发方法，把store的actions方法加入到VUE页/组件的方法体中

...mapActions({ upuser:'updateuser', clearuser:'clearuser'})//分发方法

methods: {
            test1() {
                console.log("user()", this.user)//eslint-disable-line
                let newuser = {name: "西瓜", sex: "女"}
                this.upuser(newuser)//调用方法
                console.log("user()", this.user)//eslint-disable-line
            },
            test2() {
                console.log("user()", this.user)//eslint-disable-line
                this.clearuser()//调用方法
                console.log("user()", this.user)//eslint-disable-line
            },
            ...mapActions({ upuser:'updateuser', clearuser:'clearuser'})//分发方法
        },

调用2个test