联想互动软件开发

chunianyo 2019-11-05

state也就是vuex里的值,联想互动软件开发(T:I8O-285I-O282) 也即是整个vuex的状态,而strict和state的设置有关,如果设置strict为true,那么不能直接修改state里的值,只能通过mutation来设置

例1:
联想互动软件开发

复制代码
<!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&gt;
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script&gt;
</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>
复制代码
渲染如下:

当我们在控制台修改store.state.coun里的值时页面会自动更新,例如:

此时页面自动更新了,变为了:

我们设置一个strict属性看看:例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&gt;
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script&gt;
</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>
复制代码

相关推荐