Lenovo interactive software development

state is vuex in value, Lenovo interactive software development (T: I8O-285I-O282 ) that is, the entire vuex state, and strict and state settings, and if set strict is true, can not directly modify the state where the value can only be set by mutation

Example 1:
Lenovo interactive software development

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>;
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>;
</head>
<body>
<div id="app">
<p>count:{{count}}</p>
</div>
<script>
const store = new Vuex.Store({
state:{count:1}
})
var app = new Vue({
el:"#app",
store,
computed:{
count(){return store.state.count }
}
})
</script>
</body>
</html>
Copy the code
rendered as follows:

When we modify store.state.coun the value in the page will automatically update in the console, for example:

The page is automatically updated, and become a:

We set up a strict property to see: Example 2:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>;
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>;
</head>
<body>
<div id="app">
<p>count:{{count}}</p>
</div>
<script>
const store = new Vuex.Store({
state:{count:1},
strict:true //新增一个strict属性,值为true
})
var app = new Vue({
el:"#app",
store,
computed:{
count(){return store.state.count }
}
})
</script>
</ body>
</ HTML>
copy the code

Guess you like

Origin blog.51cto.com/14253497/2447579